在HTML 5出現之前,Web開發人員必須使用Adobe Flash播放器等插件在網頁上嵌入視頻。如今,您可以輕松地將視頻嵌入到帶有 標簽的HTML文檔中。在本文中,我們將了解該標記在 HTML 中的工作原理。
目錄
基本語法
<視頻>標簽的屬性
屬性
海報屬性
控件屬性
循環屬性
自動播放屬性
寬度和高度屬性
靜音屬性
預加載屬性
C.
基本語法
就像 標記一樣,采用一個屬性,您需要使用它來指定視頻的源。<img><video>src
默認情況下,它在瀏覽器中顯示為圖像:
此 CSS 將網頁中的所有內容居中并更改背景顏色:
此外,您還可以為 帶有 標記的 指定多個視頻源。此標記也必須具有自己的屬性。<video><source><source>src
您可以使用多個標簽來提供同一視頻的不同格式。然后,瀏覽器將播放其支持的格式。<source>
標記的屬性<source>
該標記支持全局屬性,如 、 、 等。<video>id class style
如果您想知道什么是全局屬性,它們是所有 HTML 標記支持的屬性。
標記支持的特定屬性包括 、 、 、 、 、 、 、 、 和其他屬性。<video>src pister cintrols loop autoplay with height preload
屬性src
src 屬性用于指定視頻的源。它可以是本地計算機上視頻的相對路徑,也可以是來自 Internet 的實時視頻鏈接。
它是可選的,因為您可以使用 標記而不是它。
屬性poster
使用 poster 屬性,您可以合并要在視頻開始播放之前或下載時顯示的圖像。
瀏覽器將顯示以下圖像,而不是視頻第一個場景的圖像:
屬性controls
使用控制時,它允許瀏覽器顯示播放控制器,如播放和暫停、音量、搜索等。
屬性loop
使用 loop 屬性,您可以使視頻自動重復。也就是說,讓它在每次停止播放時再次開始播放。
屬性autoplay
該屬性允許您在頁面加載后立即自動開始播放視頻。autoplay
和 屬性widthheight
您可以使用寬度和高度屬性來指定視頻的寬度和高度(以像素為單位)。它只接受絕對值,例如像素。
屬性muted
您可以使用 muted 屬性告訴瀏覽器在視頻開始播放時不要播放與視頻關聯的任何聲音。
如果指定了該屬性,則用戶可以單擊音量按鈕以取消靜音。controls
屬性preload
使用 preload 屬性,您可以向瀏覽器提供提示,說明在頁面加載時是否下載視頻。
此屬性對于用戶體驗至關重要。
您可以將 3 個值與預加載屬性一起使用:
none:指定在用戶按下播放之前不加載視頻
auto:指定即使用戶不按播放也應下載視頻
metadata:指定瀏覽器應收集長度、大小、持續時間等元數據。
結論
在本文中,您了解了 HTML5 標記及其屬性,因此您可以在項目中以正確的方式使用它。
由于音頻是完整視頻的重要組成部分,因此您還可以使用 標記將音頻文件放在網頁上。但在大多數情況下,您應該將 標記用于此目的,以獲得適當的用戶體驗。