{%hackmd @dzif24x25/yRBnguqQQl-2ylH1j5h0cg %}
# HTML `<video>` 影片
---
## `<video>`
可用來播放影片或影音串流
---
## `<video>` 語法
```htmlembedded
<video src="影片連結"></video>
```
---
### 屬性:
* `autoplay`: 布林 (boolean) 屬性,控制是否自動播放影片,預設是 `false`
* `loop`: 布林 (boolean) 屬性,控制是否重複播放影片,預設是 `false`
* `muted`: 布林 (boolean) 屬性,控制是否靜音,預設是 `false`
* `controls`: 布林 (boolean) 屬性,指定是否顯示影音控制面板,由瀏覽器提供上面會有播放進度、暫停鈕、播放鈕、靜音鈕等,預設是 `false`
---
### 範例:
```htmlembedded=
<p>muted=true autoplay=true</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" muted=true autoplay=true width=100%></video>
```
```htmlembedded=
<p>controls</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" controls width=100%></video>
```
```htmlembedded=
<p>controls muted=true</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" controls muted=true width=100%></video>
```
```htmlembedded=
<p>controls muted=true autoplay=true</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" controls muted=true autoplay=true width=100%></video>
```
---
<p>muted=true autoplay=true</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" muted=true autoplay=true width=100%></video>
---
<p>controls</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" controls width=100%></video>
---
<p>controls muted=true</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" controls muted=true width=100%></video>
---
<p>controls muted=true autoplay=true</p>
<video src="https://i.imgur.com/zv0dRSA.mp4" controls muted=true autoplay=true width=100%></video>
{"metaMigratedAt":"2023-06-18T02:17:25.159Z","metaMigratedFrom":"YAML","title":"HTML `<video>` 影片","breaks":true,"contributors":"[{\"id\":\"b1b336d5-b75d-4c19-b4f6-fccd69a2a9f2\",\"add\":1526,\"del\":4,\"latestUpdatedAt\":1682270502682}]"}