HTML5 <video> 標籤支持3種常用的視頻格式:
1、Ogg = 帶有Theora 視頻編碼和Vorbis 音頻編碼的Ogg 文件;
2、MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件;
3、WebM = 帶有VP8 視頻編碼和Vorbis 音頻編碼的WebM 文件。
現在主流瀏覽器對視頻格式的支持都有所不同,相信HTML5正式發布的那天<video> 會支持更多的視頻格式,給開發者和用戶帶來不少的好處。
下面來講講HTML5視頻標籤videos的使用,如果需要在瀏覽器中顯示視頻,你所需要的就是複制下面的代碼:
<video src=movie.ogg width=320 height=240 controls=controls>
Your browser does not support the video tag.
</video>
control 屬性供添加播放、暫停和音量控件。包含Width寬度和高度height屬性也是不錯的主意。 <video> 與</video> 之間插入的內容是供不支持video 元素的瀏覽器顯示的。
上面的代碼使用一個Ogg 文件,適用於Firefox、Opera 以及谷歌Chrome 瀏覽器。要確保適用於Safari 瀏覽器,視頻文件必須使用MPEG4 格式。 IE8是不支持HTML5的<video>標籤,IE9支持該標籤,但也必須使用MPEG4格式。
video 元素允許多個source 元素。 source 元素可以鏈接不同格式的視頻文件。瀏覽器檢測並使用第一個可識別的格式,代碼如下:
<video width=320 height=240 controls=controls>
<source src=movie.ogg type=video/ogg>
<source src=movie.mp4 type=video/mp4>
Your browser does not support the video tag.
</video>
下面介紹下<video> 標籤的常用屬性:
| 屬性 | 值 | 描述 |
autoplay | autoplay | 如果出現該屬性,則視頻在就緒後馬上播放。 |
controls | controls | 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。 |
height | pixels | 設置視頻播放器的高度。 |
loop | loop | 如果出現該屬性,則當媒介文件完成播放後再次開始播放。 |
preload | preload | 如果出現該屬性,則視頻在頁面加載時進行加載,並預備播放。如果使用autoplay,則忽略該屬性。 |
src | url | 要播放的視頻的URL。 |
width | pixels | 設置視頻播放器的寬度。 |
HTML5視頻標籤video的出現大大提升了用戶對Web的體驗感,將會更加方便用戶的瀏覽和使用。