在HTML 5出現(xiàn)之前，Web開發(fā)人員必須使用Adobe Flash播放器等插件在網(wǎng)頁(yè)上嵌入視頻。如今，您可以輕松地將視頻嵌入到帶有 標(biāo)簽的HTML文檔中。在本文中，我們將了解該標(biāo)記在 HTML 中的工作原理。

　　目錄

　　基本語(yǔ)法

　　<視頻>標(biāo)簽的屬性

　　屬性

　　海報(bào)屬性

　　控件屬性

　　循環(huán)屬性

　　自動(dòng)播放屬性

　　寬度和高度屬性

　　靜音屬性

　　預(yù)加載屬性

　　C.

　　基本語(yǔ)法

　　就像 標(biāo)記一樣，采用一個(gè)屬性，您需要使用它來(lái)指定視頻的源。<img><video>src

　　默認(rèn)情況下，它在瀏覽器中顯示為圖像：

　　此 CSS 將網(wǎng)頁(yè)中的所有內(nèi)容居中并更改背景顏色：

　　此外，您還可以為 帶有 標(biāo)記的 指定多個(gè)視頻源。此標(biāo)記也必須具有自己的屬性。<video><source><source>src

　　您可以使用多個(gè)標(biāo)簽來(lái)提供同一視頻的不同格式。然后，瀏覽器將播放其支持的格式。<source>

　　標(biāo)記的屬性<source>

　　該標(biāo)記支持全局屬性，如 、 、 等。<video>id class style

　　如果您想知道什么是全局屬性，它們是所有 HTML 標(biāo)記支持的屬性。

　　標(biāo)記支持的特定屬性包括 、 、 、 、 、 、 、 、 和其他屬性。<video>src pister cintrols loop autoplay with height preload

　　屬性src

　　src 屬性用于指定視頻的源。它可以是本地計(jì)算機(jī)上視頻的相對(duì)路徑，也可以是來(lái)自 Internet 的實(shí)時(shí)視頻鏈接。

　　它是可選的，因?yàn)槟梢允褂?標(biāo)記而不是它。

　　屬性poster

　　使用 poster 屬性，您可以合并要在視頻開始播放之前或下載時(shí)顯示的圖像。

　　瀏覽器將顯示以下圖像，而不是視頻第一個(gè)場(chǎng)景的圖像：

　　屬性controls

　　使用控制時(shí)，它允許瀏覽器顯示播放控制器，如播放和暫停、音量、搜索等。

　　屬性loop

　　使用 loop 屬性，您可以使視頻自動(dòng)重復(fù)。也就是說(shuō)，讓它在每次停止播放時(shí)再次開始播放。

　　屬性autoplay

　　該屬性允許您在頁(yè)面加載后立即自動(dòng)開始播放視頻。autoplay

　　和 屬性widthheight

　　您可以使用寬度和高度屬性來(lái)指定視頻的寬度和高度(以像素為單位)。它只接受絕對(duì)值，例如像素。

　　屬性muted

　　您可以使用 muted 屬性告訴瀏覽器在視頻開始播放時(shí)不要播放與視頻關(guān)聯(lián)的任何聲音。

　　如果指定了該屬性，則用戶可以單擊音量按鈕以取消靜音。controls

　　屬性preload

　　使用 preload 屬性，您可以向?yàn)g覽器提供提示，說(shuō)明在頁(yè)面加載時(shí)是否下載視頻。

　　此屬性對(duì)于用戶體驗(yàn)至關(guān)重要。

　　您可以將 3 個(gè)值與預(yù)加載屬性一起使用：

　　none：指定在用戶按下播放之前不加載視頻

　　auto：指定即使用戶不按播放也應(yīng)下載視頻

　　metadata：指定瀏覽器應(yīng)收集長(zhǎng)度、大小、持續(xù)時(shí)間等元數(shù)據(jù)。

　　結(jié)論

　　在本文中，您了解了 HTML5 標(biāo)記及其屬性，因此您可以在項(xiàng)目中以正確的方式使用它。

　　由于音頻是完整視頻的重要組成部分，因此您還可以使用 標(biāo)記將音頻文件放在網(wǎng)頁(yè)上。但在大多數(shù)情況下，您應(yīng)該將 標(biāo)記用于此目的，以獲得適當(dāng)?shù)挠脩趔w驗(yàn)。