武林網(www.vevb.com)文章簡介:與音頻一樣,在過去,我們如果想在Web上播放視頻,也是都是通過Flash來播放,同樣並不是所有的瀏覽器都安裝了Flash播放器插件,而現在我們在HTML5中,就能完全脫離Flash或其他的插件來播放視頻了。
與音頻一樣,在過去,我們如果想在Web上播放視頻,也是都是通過Flash來播放,同樣並不是所有的瀏覽器都安裝了Flash播放器插件,而現在我們在HTML5中,就能完全脫離Flash或其他的插件來播放視頻了。
video標籤:
IE9
FireFox 5.0
Safari 5.5
Chrome 12
Opera 11.5
Mpeg4
√
×
√
√
×
Ogg
×
√
×
√
√
WebM
×
√
×
√
√
Ogg:帶有Theora 視頻編碼和Vorbis 音頻編碼的Ogg 文件
MPEG4:帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件
WebM:帶有VP8 視頻編碼和Vorbis 音頻編碼的WebM 文件
video標籤的屬性有:
屬性
值(可省略)
描述
src
url
要播放的視頻的URL,路徑可為網絡路徑或相對路徑。
controls
controls
向用戶顯示控件,比如播放按鈕。
loop
loop
每當視頻結束時重新開始播放。
preload
preload
視頻在頁面加載時進行加載,並預備播放。如果使用autoplay,則忽略該屬性。
autoplay
autoplay
則視頻在就緒後馬上播放。
width
autoplay
則視頻的寬度。
height
autoplay
則視頻的高度。
注:video的屬性與audio的屬性基本一致,只不過多出了Width和height屬性。
source子標籤
此標籤是用來指定視頻的路徑,一般存在此子標籤的時候則不能再video中出現src屬性,在不同的瀏覽器下對video標籤有不同的視頻支持,那麼我們為了讓其能夠在不同的瀏覽器下播放,可以有多種視頻格式,那麼我們只需要加入此標籤,來指定視頻即可,瀏覽器則會是video播放所支持的視頻格式。 Source有兩個屬性,分別是:
屬性
描述
src
要播放的視頻的URL,路徑可為網絡路徑或相對路徑。
type
視頻類型
<h1>請看視頻,視頻來自搜狗瀏覽器首頁的實驗室:</h1>
<video width=600 height=400 controls=controls autoplay=true>
<source src= type=video/mp4/>
<source src= type=video/ogg/>
</video>