探索使用HTML video標籤的基本知識。
video標籤允許您在HTML頁面中嵌入視頻內容。
此元素可以通過getUserMedia（）或WebRTC使用網絡攝像頭來進行視訊流，也可以通過使用src屬性引用視頻源來播放視頻：
<video src="file.mp4" />
默認情況下，瀏覽器不會為此元素顯示任何控件，只顯示視頻。
這意味著只有在設置為自動播放時（稍後將介紹），音頻才會播放，用戶無法看到如何停止播放、暫停、控制音量或在視頻的特定位置跳轉。
要顯示內置控件，可以添加controls屬性：
<video src="file.mp4" controls />
在Chrome中的外觀如下：
初始顯示的圖像是視頻的第一幀。
您可以使用poster屬性顯示另一個圖像，這是一個常見的需求：
<video src="video.mp4" poster="image.png" controls />
如果沒有指定poster屬性，瀏覽器將在可用時顯示視頻的第一幀。
您可以使用type屬性指定視頻文件的MIME類型。如果未設置，瀏覽器將嘗試自動確定：
<video src="file.mp4" controls type="video/mp4" />
視頻文件默認不自動播放。添加autoplay屬性以自動播放音頻：
<video src="file.mp4" controls autoplay />
某些瀏覽器還需要muted屬性以自動播放。僅將視頻靜音時，視頻才會自動播放：
<video src="file.mp3" controls autoplay muted />
如果設置了loop屬性，則該視頻在0:00處重新開始播放，否則如果該屬性不存在，視頻將停在文件結尾：
<video src="file.mp4" controls autoplay loop />
您可以設置width和height屬性來設置元素的佔用空間，以便瀏覽器可以進行考慮，並且在最終加載時不會更改布局。它接受一個以像素為單位的數值。
CORS
視頻受到CORS的約束，除非在服務器端允許，否則無法跨域播放視頻。
將此標籤放在網頁中並不會發生任何事情。沒有辦法開始播放視頻，並且它不會自動播放。要使視頻播放，必須添加autoplay屬性：
<video src="video.mp4" autoplay />
更改視頻顯示屬性
您可以使用width和height屬性為視頻區域設置寬度和高度，以像素表示：
<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />
如果不支持video標籤，則顯示內容
video標籤在非常好地支持，直到IE9，所以現在應該不再需要有占位文本，但我們有這個選項。只需添加一個關閉標籤，并在開始標籤和關閉標籤之間插入文本：
<video src="video.mp4">不支持視頻標籤</video>
添加多個源
瀏覽器可以實現一種視頻編解碼器，但無法實現另一種。也許您希望使用將文件大小減半的新標準，但仍然希望支持舊的瀏覽器。
可以使用source標籤來實現：
<video controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.avi" type="video/avi"/>
</audio>
您可以使用CSS來設置控件的樣式，但這超出了本介紹的範圍。
預加載視頻
如果您不設置autoplay，則根據規範，瀏覽器只會下載視頻元數據（例如查找視頻的長度），但不會下載視頻本身。
您可以使用以下方法強制預加載視頻：
<video src="video.mp4" preload="auto" />
使用視頻事件
我們可以使用JavaScript在每個video元素上監聽事件，以創建有趣的項目和界面。有很多不同的事件可以使用。
play事件在視頻播放開始時觸發：
document.querySelector('video').addEventListener('play', () => {
alert('Video is playing!!!')
})
您還可以直接在HTML元素上使用on<event>屬性添加此事件（以及其他事件）：
<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
alert('Video is playing!!!')
})
這些是您可以監聽的一些事件：
play：視頻開始播放pause：視頻被暫停ended：視頻播放完成timeupdate：用戶與播放時間軸交互並向前/向後volumechange：用戶更改音量
還有很多與視頻加載相關的事件，您可以在MDN上找到完整的列表。