現在如果要在頁面中使用video標籤，需要考慮三種情況，支持Ogg Theora或者VP8（如果這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、 Chrome），都不支持的（IE6、7、8）。好吧，現在讓我們從技術層面來認識HTML 5的視頻，包括video標籤的使用，視頻對象可以用到的媒介屬性和方法，以及媒介事件。
Video標籤的使用Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內部使用的標籤<source>。 Video標籤內除了可以包含<source>標籤外，還可以包含當指定的視頻都不能播放時，返回的內容。
(1) src屬性和poster屬性你能想像src屬性是用來幹啥的。跟<img>標籤的一樣，這個屬性用於指定視頻的地址。而poster屬性用於指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。視頻數據無效可能是視頻正在加載，可能是視頻地址錯誤等等。
<video width=658 height=444 src=http://www.youname.com/images/first.mp4 poster=http://www.youname.com/images/first.png autoplay=autoplay></video>(2) preload屬性
這個屬性也能通過名字了解用處，此屬性用於定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為auto。
<video width=658 height=444 src=http://www.youname.com/images/first.mp4 poster=http://www.youname.com/images/first.png autoplay=autoplay preload=none>< /video>
None：不進行預加載。使用此屬性值，可能是頁面製作者認為用戶不期望此視頻，或者減少HTTP請求。
Metadata：部分預加載。使用此屬性值，代表頁面製作者認為用戶不期望此視頻，但為用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。
Auto：全部預加載。
(3) autoplay屬性又是一個看名字知道用處的屬性。 Autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。
<video width=658 height=444 src=http://www.youname.com/images/first.mp4 poster=http://www.youname.com/images/first.png autoplay=autoplay preload=none>< /video>
注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標籤中使用此屬性表示true，此時屬性要么沒有值，要么其值恆等於他的名字（此處，自動播放為<video autoplay />或者<video autoplay=autoplay />） ；而在標籤中不使用此屬性表示false（此處不進行自動播放為<video />）。
(4) loop屬性<video width=658 height=444 src=http://www.youname.com/images/first.mp4 poster=http://www.youname.com/images/first.png autoplay=autoplay loop=loop>< /video>
一目了然，loop屬性用於指定視頻是否循環播放，同樣是一個布爾屬性。
(5) controls屬性<video width=658 height=444 src=http://www.youname.com/images/first.mp4 poster=http://www.youname.com/images/first.png autoplay=autoplay preload=none controls= controls></video>
Controls屬性用於向瀏覽器指明頁面製作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。
控制欄須包括播放暫停控制，播放進度控制，音量控制等等。
每個瀏覽器默認的播放控制欄在界面上不一樣。由於我瀏覽器的詭異問題，Firefox和Safari的Video標籤不正常，所以這兩個只能在網上找截圖了。
(6) width屬性和height屬性屬於標籤的通用屬性了，這個不用多說。
(7) source標籤<video width=658 height=444 poster=http://www.youname.com/images/first.png autoplay=autoplay preload=none controls=controls><source src=http://www.youname.com/images /first.ogv /><source src=http://www.youname.com/images/first.ogg /></video>
Source標籤用於給媒體（因為audio標籤同樣可以包含此標籤，所以這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標籤沒有使用src屬性時使用。
瀏覽器按source標籤的順序檢測標籤指定的視頻是否能夠播放（可能是視頻格式不支持，視頻不存在等等），如果不能播放，換下一個。此方法多用於兼容不同的瀏覽器。 Source標籤本身不代表任何含義，不能單獨出現。
此標籤包含src、type、media三個屬性。
src屬性：用於指定媒體的地址，和video標籤的一樣。
Type屬性：用於說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。
Media屬性：用於說明媒體在何種媒介中使用，不設置時默認值為all，表示支持所有媒介。你想到<style>標籤的media屬性了麼？一樣一樣一樣的。
(8) 一個完整的例子<video width=658 height=444 poster=http://www.youname.com/images/first.png autoplay=autoplay preload=none controls=controls><source src=http://www.youname.com/images /first.ogv /><source src=http://www.youname.com/images/first.ogg /></video>
這段代碼在頁面中定義了一個視頻，此視頻的預覽圖為poster的屬性值，顯示瀏覽器的默認媒體控制欄，預加載視頻的元數據，循環播放，寬度為900像素，高度為240像素。
第一選擇視頻地址為第一個source標籤的src屬性值，視頻類別為Ogg視頻，視頻編碼譯碼器為Theora，音頻編碼譯碼器為Vorbis，播放媒介為顯示器；第二選擇視頻地址不再累述。如果你還要兼容IE的話，可以在最後一個source標籤後再加上Flash播放器的標籤集，或者使用一點JavaScript代碼。
總結以上所述是小編給大家介紹的HTML網頁中插入視頻的方法小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！