這篇文章主要介紹了HTML網(wǎng)頁中插入視頻之Video標(biāo)簽的使用方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問題，與客戶深入溝通，找到雙峰網(wǎng)站設(shè)計與雙峰網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋雙峰地區(qū)。

現(xiàn)在如果要在頁面中使用video標(biāo)簽，需要考慮三種情況，支持Ogg Theora或者VP8（如果這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，現(xiàn)在讓我們從技術(shù)層面來認(rèn)識HTML 5的視頻，包括video標(biāo)簽的使用，視頻對象可以用到的媒介屬性和方法，以及媒介事件。

Video標(biāo)簽的使用

Video標(biāo)簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內(nèi)部使用的標(biāo)簽。Video標(biāo)簽內(nèi)除了可以包含標(biāo)簽外，還可以包含當(dāng)指定的視頻都不能 播放時，返回的內(nèi)容。

(1) src屬性和poster屬性

你能想象src屬性是用來干啥的。跟標(biāo)簽的一樣，這個屬性用于指定視頻的地址。而poster屬性用于指定一張圖片，在當(dāng)前視頻數(shù)據(jù)無效時顯示（預(yù)覽圖）。視頻數(shù)據(jù)無效可能是視頻正在加載，可能是視頻地址錯誤等等。

(2) preload屬性

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

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

Metadata：部分預(yù)加載。使用此屬性值，代表頁面制作者認(rèn)為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時間等等）。

Auto：全部預(yù)加載。

(3) autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動播放，是一個布爾屬性。當(dāng)出現(xiàn)時，表示自動播放，去掉是表示不自動播放。

注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標(biāo)簽中使用此屬性表示true，此時屬性要么沒有值，要么其值恒等于他的名字 （此處，自動播放為

(4) loop屬性

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

(5) controls屬性

Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。

控制欄須包括播放暫?？刂?，播放進度控制，音量控制等等。

每個瀏覽器默認(rèn)的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，F(xiàn)irefox和Safari的Video標(biāo)簽不正常，所以這兩個只能在網(wǎng)上找截圖了。

(6) width屬性和height屬性

屬于標(biāo)簽的通用屬性了，這個不用多說。

(7) source標(biāo)簽

Source標(biāo)簽用于給媒體（因為audio標(biāo)簽同樣可以包含此標(biāo)簽，所以這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標(biāo)簽沒有使用src屬性時使用。

瀏覽器按source標(biāo)簽的順序檢測標(biāo)簽指定的視頻是否能夠播放（可能是視頻格式不支持，視頻不存在等等），如果不能播放，換下一個。此方法多用于兼容不同的瀏覽器。Source標(biāo)簽本身不代表任何含義，不能單獨出現(xiàn)。

此標(biāo)簽包含src、type、media三個屬性。

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

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

Media屬性：用于說明媒體在何種媒介中使用，不設(shè)置時默認(rèn)值為all，表示支持所有媒介。你想到