現(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等幾個(gè)屬性， 以及一個(gè)內(nèi)部使用的標(biāo)簽<source>。Video標(biāo)簽內(nèi)除了可以包含<source>標(biāo)簽外，還可以包含當(dāng)指定的視頻都不能 播放時(shí)，返回的內(nèi)容。
(1) src屬性和poster屬性
你能想象src屬性是用來干啥的。跟<img>標(biāo)簽的一樣，這個(gè)屬性用于指定視頻的地址。而poster屬性用于指定一張圖片，在當(dāng)前視頻數(shù)據(jù)無效時(shí)顯示（預(yù)覽圖）。視頻數(shù)據(jù)無效可能是視頻正在加載，可能是視頻地址錯(cuò)誤等等。
<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屬性
這個(gè)屬性也能通過名字了解用處，此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值：none、metadata、auto。如果不使用此屬性，默認(rèn)為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：不進(jìn)行預(yù)加載。使用此屬性值，可能是頁面制作者認(rèn)為用戶不期望此視頻，或者減少HTTP請求。
Metadata：部分預(yù)加載。使用此屬性值，代表頁面制作者認(rèn)為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時(shí)間等等）。
Auto：全部預(yù)加載。
(3) autoplay屬性
又是一個(gè)看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動播放，是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí)，表示自動播放，去掉是表示不自動播放。
<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。正確的用法是，在標(biāo)簽中使用此屬性表示true，此時(shí)屬性要么沒有值，要么其值恒等于他的名字 （此處，自動播放為<video autoplay />或者<video autoplay=”autoplay” />）；而在標(biāo)簽中不使用此屬性表示false（此處不進(jìn)行自動播放為<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屬性用于指定視頻是否循環(huán)播放，同樣是一個(gè)布爾屬性。
(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屬性用于向?yàn)g覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。
控制欄須包括播放暫?？刂?，播放進(jìn)度控制，音量控制等等。
每個(gè)瀏覽器默認(rèn)的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，F(xiàn)irefox和Safari的Video標(biāo)簽不正常，所以這兩個(gè)只能在網(wǎng)上找截圖了。
(6) width屬性和height屬性
屬于標(biāo)簽的通用屬性了，這個(gè)不用多說。
(7) source標(biāo)簽
<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>