/

HTML `video`標籤

HTML video標籤

探索使用HTML video標籤的基本知識。

video標籤允許您在HTML頁面中嵌入視頻內容。

此元素可以通過getUserMedia（）或WebRTC使用網絡攝像頭來進行視訊流，也可以通過使用src屬性引用視頻源來播放視頻：

1
<video src="file.mp4" />

默認情況下，瀏覽器不會為此元素顯示任何控件，只顯示視頻。

這意味著只有在設置為自動播放時（稍後將介紹），音頻才會播放，用戶無法看到如何停止播放、暫停、控制音量或在視頻的特定位置跳轉。

要顯示內置控件，可以添加controls屬性：

1
<video src="file.mp4" controls />

在Chrome中的外觀如下：

Video tag appearance

初始顯示的圖像是視頻的第一幀。

您可以使用poster屬性顯示另一個圖像，這是一個常見的需求：

1
<video src="video.mp4" poster="image.png" controls />

如果沒有指定poster屬性，瀏覽器將在可用時顯示視頻的第一幀。

您可以使用type屬性指定視頻文件的MIME類型。如果未設置，瀏覽器將嘗試自動確定：

1
<video src="file.mp4" controls type="video/mp4" />

視頻文件默認不自動播放。添加autoplay屬性以自動播放音頻：

1
<video src="file.mp4" controls autoplay />

某些瀏覽器還需要muted屬性以自動播放。僅將視頻靜音時，視頻才會自動播放：

1
<video src="file.mp3" controls autoplay muted />

如果設置了loop屬性，則該視頻在0:00處重新開始播放，否則如果該屬性不存在，視頻將停在文件結尾：

1
<video src="file.mp4" controls autoplay loop />

您可以設置width和height屬性來設置元素的佔用空間，以便瀏覽器可以進行考慮，並且在最終加載時不會更改布局。它接受一個以像素為單位的數值。

CORS

視頻受到CORS的約束，除非在服務器端允許，否則無法跨域播放視頻。

將此標籤放在網頁中並不會發生任何事情。沒有辦法開始播放視頻，並且它不會自動播放。要使視頻播放，必須添加autoplay屬性：

1
<video src="video.mp4" autoplay />

更改視頻顯示屬性

您可以使用width和height屬性為視頻區域設置寬度和高度，以像素表示：

1
2
3
<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

如果不支持video標籤，則顯示內容

video標籤在非常好地支持，直到IE9，所以現在應該不再需要有占位文本，但我們有這個選項。只需添加一個關閉標籤，并在開始標籤和關閉標籤之間插入文本：

1
<video src="video.mp4">不支持視頻標籤</video>

添加多個源

瀏覽器可以實現一種視頻編解碼器，但無法實現另一種。也許您希望使用將文件大小減半的新標準，但仍然希望支持舊的瀏覽器。

可以使用source標籤來實現：

1
2
3
4
<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

您可以使用CSS來設置控件的樣式，但這超出了本介紹的範圍。

預加載視頻

如果您不設置autoplay，則根據規範，瀏覽器只會下載視頻元數據（例如查找視頻的長度），但不會下載視頻本身。

您可以使用以下方法強制預加載視頻：

1
<video src="video.mp4" preload="auto" />

使用視頻事件

我們可以使用JavaScript在每個video元素上監聽事件，以創建有趣的項目和界面。有很多不同的事件可以使用。

play事件在視頻播放開始時觸發：

1
2
3
document.querySelector('video').addEventListener('play', () => {
 alert('Video is playing!!!')
})

您還可以直接在HTML元素上使用on<event>屬性添加此事件（以及其他事件）：

1
<video src="video.mp4" controls onplay="playing()" />
1
2
3
const playing = () => {
 alert('Video is playing!!!')
})

這些是您可以監聽的一些事件：

  • play：視頻開始播放
  • pause：視頻被暫停
  • ended：視頻播放完成
  • timeupdate：用戶與播放時間軸交互並向前/向後
  • volumechange：用戶更改音量

還有很多與視頻加載相關的事件，您可以在MDN上找到完整的列表。