HTML5中的Video標簽如何使用

這篇文章主要介紹“HTML5中的Video標簽如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5中的Video標簽如何使用”文章能幫助大家解決問題。

　網站制作中的Video標簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性，以及一個內部使用的標簽。Video標簽內除了可以包含標簽外，還可以包含當指定的視頻都不能播放時，返回的內容。

　　(1) source標簽

　　Source標簽用于給媒體(因為audio標簽同樣可以包含此標簽，所以這兒用媒體，而不是視頻)指定多個可選擇的文件地址，且只能在媒體標簽沒有使用src屬性時使用。瀏覽器按source標簽的順序檢測標簽指定的視頻是否能夠播放(可能是視頻格式不支持，視頻不存在等等)，如果不能播放，換下一個。此方法多用于兼容不同的瀏覽器。Source標簽本身不代表任何含義，不能單獨出現。此標簽包含src、type、media三個屬性。

　　src屬性：用于指定媒體的地址，和video標簽的一樣。

　　Type屬性：用于說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

　　Media屬性：用于說明媒體在何種媒介中使用，不設置時默認值為all，表示支持所有媒介。

　　(2) preload屬性

　　這個屬性也能通過名字了解用處，此屬性用于定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為auto。

　　None：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。

　　Metadata：部分預加載。使用此屬性值，代表頁面制作者認為用戶不期望此視頻，但為用戶提供一些元數據。

　　Auto：全部預加載。

　　(3) src屬性和poster屬性

　　你能想象src屬性是用來干啥的。跟< img >標簽的一樣，這個屬性用于指定視頻的地址。而poster屬性用于指定一張圖片，在當前視頻數據無效時顯示(預覽圖)。視頻數據無效可能是視頻正在加載，可能是視頻地址錯誤等等。

　　(4) loop屬性

　　一目了然，loop屬性用于指定視頻是否循環播放，同樣是一個布爾屬性。

　　(5) autoplay屬性

　　又是一個看名字知道用處的屬性。Autoplay屬性用于設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標簽中使用此屬性表示true，此時屬性要么沒有值，要么其值恒等于他的名字(此處，自動播放為< video autoplay />或者< video autoplay=”autoplay” />);而在標簽中不使用此屬性表示false(此處不進行自動播放為< video / >)。

　　(6) width屬性和height屬性

　　屬于標簽的通用屬性了，這個不用多說。

　　(7) controls屬性

　　Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。控制欄須包括播放暫停控制，播放進度控制，音量控制等等。每個瀏覽器默認的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，Firefox和Safari的Video標簽不正常，所以這兩個只能在網上找截圖了。

關于“HTML5中的Video標簽如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。