HTML 影片
HTML <video> 元素用於在網頁上顯示影片。
HTML <video> 元素
要在 HTML 中顯示影片，請使用 <video> 元素
示例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援 video 標籤。
</video>
自己動手試一試 »
如何運作
controls 屬性添加了影片控制元件，如播放、暫停和音量。
最好始終包含 width 和 height 屬性。如果未設定高度和寬度，影片載入時頁面可能會閃爍。
<source> 元素允許您指定瀏覽器可以從中選擇的備用影片檔案。瀏覽器將使用第一個識別的格式。
<video> 和 </video> 標籤之間的文字僅顯示在不支援 <video> 元素的瀏覽器中。
HTML <video> 自動播放
要自動開始播放影片，請使用 autoplay 屬性
示例
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援 video 標籤。
</video>
自己動手試一試 »
注意： Chromium 瀏覽器在大多數情況下不允許自動播放。但是，靜音自動播放始終是被允許的。
在 autoplay 之後新增 muted，讓您的影片開始自動播放（但靜音）
示例
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援 video 標籤。
</video>
自己動手試一試 »
瀏覽器支援
表中的數字顯示了完全支援 <video> 元素的首個瀏覽器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML 影片格式
支援三種影片格式：MP4、WebM 和 Ogg。不同格式的瀏覽器支援情況為：
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | 推薦 | 推薦 | 推薦 |
| Chrome | 推薦 | 推薦 | 推薦 |
| Firefox | 推薦 | 推薦 | 推薦 |
| Safari | 推薦 | 推薦 | 不推薦 |
| Opera | 推薦 | 推薦 | 推薦 |
HTML 影片 - 媒體型別
| 檔案格式 | 媒體型別 |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML 影片 - 方法、屬性和事件
HTML DOM 為 <video> 元素定義了方法、屬性和事件。
這允許您載入、播放和暫停影片，以及設定時長和音量。
還有 DOM 事件，可以在影片開始播放、暫停等時通知您。
有關完整的 DOM 參考，請訪問我們的 HTML 音訊/影片 DOM 參考。
HTML 影片標籤
| 標籤 | 描述 |
|---|---|
| <video> | 定義影片或電影 |
| <source> | 為媒體元素（如 <video> 和 <audio>）定義多個媒體資源 |
| <track> | 在媒體播放器中定義文字軌道 |
