HTML5中video標(biāo)簽的使用方法

發(fā)布時間：2020-08-27 11:33:56

來源：億速云

閱讀：100

作者：小新

這篇文章將為大家詳細(xì)講解有關(guān)HTML5中video標(biāo)簽的使用方法，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

HTML5中的video標(biāo)簽用于播放視頻文件的，在video標(biāo)簽中我們可以設(shè)置窗口的寬高，視頻的自動播放，循環(huán)播放以及視頻的封面圖片等等

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

HTML5 video標(biāo)簽的詳細(xì)用法

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

例：

定義寬高

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

效果圖：

自動播放

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

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

您的瀏覽器不支持 video 標(biāo)簽。

我們還可以在自動播放時設(shè)置muted狀態(tài)，這樣做的目的是當(dāng)視頻自動播放時會靜音，而且我們還可以通過點(diǎn)擊播放器的揚(yáng)聲器來開啟聲音

您的瀏覽器不支持 video 標(biāo)簽。

效果圖：

循環(huán)播放

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

您的瀏覽器不支持 video 標(biāo)簽。

預(yù)加載媒體文件

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

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

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

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

您的瀏覽器不支持 video 標(biāo)簽。

設(shè)置視頻的封面圖片

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

(1)視頻第一幀未加載完畢

(2)把preload屬性設(shè)置為none

(3)沒有找到指定的視頻文件

您的瀏覽器不支持 video 標(biāo)簽。

效果圖：

關(guān)于HTML5中video標(biāo)簽的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的HTML5新增的video标签,HTML5中video标签的使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。