例

播放錄像：

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

您的瀏覽器不支持 video 標簽。

</video>

瀏覽器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 標簽。

注釋：IE 8 或更早版本的 IE 瀏覽器不支持 <video> 標簽。

標簽定義及使用說明

<video> 標簽定義視頻，比如電影片段或其他視頻流。

目前，<video> 元素支持三種視頻格式：MP4、WebM、Ogg。

• MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器

• WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器

• Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

音頻格式的 MIME 類型

HTML 4.01 與 HTML5之間的差異

<video> 標簽是 HTML5 的新標簽。

提示和注釋

提示：可以在 <video> 和 </video> 標簽之間放置文本內容，這樣不支持 <video> 元素的瀏覽器就可以顯示出該標簽的信息。

可選屬性

New：HTML5 中的新屬性。

全局屬性

<video> 標簽支持 HTML 的全局屬性。

事件屬性

<video> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML5中的video標簽用于播放視頻文件的，在video標簽中我們可以設置窗口的寬高，視頻的自動播放，循環播放以及視頻的封面圖片等等

HTML5是下一代HTML，新增了許多新的標簽，這些標簽實現了許多新的功能。并且還減少了對外部插件的要求同時也可以更好的處理錯誤。比如HTML5中的video標簽就可以很好的實現了在頁面上播放視頻的效果。接下來在文章中將為大家具體介紹如何使用video標簽，具有一定的參考作用，希望對大家有所幫助

【推薦課程：HTML5教程】

HTML5 video標簽的詳細用法

用于播放視頻文件，比如電影或其它視頻流。可以在開始標簽和結束標簽之間放置文本內容，這樣做的好處是一些低版本的瀏覽器就可以顯示出不支持該標簽的信息

例：

<video src="movie01.mp4" controls></video>

定義寬高

我們可以給這個視頻自定義寬高來改變它的窗口大小

<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>

效果圖：

自動播放

我們可以通過設置屬性來讓視頻是否開啟自動播放

（1）使用autoplay屬性可以讓瀏覽器加載完后視頻文件后立即播放

<video width="400" height="300" controls autoplay>

<source src="movie01.mp4" type="video/mp4">

您的瀏覽器不支持 video 標簽。

</video>

我們還可以在自動播放時設置muted狀態，這樣做的目的是當視頻自動播放時會靜音，而且我們還可以通過點擊播放器的揚聲器來開啟聲音

<video width="400" height="300" controls autoplay muted>

<source src="movie01.mp4" type="video/mp4">

您的瀏覽器不支持 video 標簽。

</video>

效果圖：

循環播放

我們可以使用loop屬性讓視頻播放結束時，再從頭開始循環播放。代碼如下所示

<video width="400" height="300" controls loop>

<source src="movie01.mp4" type="video/mp4">

您的瀏覽器不支持 video 標簽。

</video>

預加載媒體文件

設置preload屬性中的不同屬性值，來告訴瀏覽器應該怎樣加載一個媒體文件：

auto：表示讓瀏覽器自動下載整個文件

none：表示讓瀏覽器不必預先下載文件

metadata：表示讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）

<video width="400" height="300" controls preload="auto">

<source src="movie01.mp4" type="video/mp4">

您的瀏覽器不支持 video 標簽。

</video>

設置視頻的封面圖片

通過poster屬性可以設置視頻的封面圖片，瀏覽器在下面三種情況下會使用這個圖片：

（1）視頻第一幀未加載完畢

（2）把preload屬性設置為none

（3）沒有找到指定的視頻文件

<video width="400" height="300" controls preload="none" poster="images/5.jpg">

<source src="movie01.mp4" type="video/mp4">

您的瀏覽器不支持 video 標簽。

</video>

效果圖：

總結：以上就是本篇文章的全部內容了，希望通過這篇文章可以幫助大家學會去使用video標簽。

以上就是HTML5中video標簽如何使用的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

1. mbed是針對非IE的瀏覽器的媒體播放器
2. object標簽一般是在IE中用的。非IE很少支持object。
3. 所以object與embed同時出現，為的就是兼容不同的瀏覽器。
4. video是html5出的一種新標準，但并不是所有的瀏覽器都支持。
5. video雖然號稱可以支持三種媒體類型，但常用的只有mp4。

embed和object有一個特點，就是無法動態渲染，所以無法通過jQuery去操作dom實現數據加載，要改變數據，可以重新篩一遍達到效果