DIV CSS 佈局教程網

與音頻一樣，在過去，我們如果想在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="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4" type="video/mp4"/>
 
        <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv" type="video/ogg"/>
 
</video>