html5 video tag 簡單示範

再說明 html5 video tag 之前要先了解一下哪些瀏覽器有支援html5 tag及播放格式.

紅色代表不支援. 綠色代表支援. 圖表來源 : “When can I use…”

目前而言 safari 5 和 ie 不支援 Ogg/Theora/Vorbis 格式. opera 10.6 和 firefox 3.6 不支援 MPEG-4/H.264/AAC 格式. chrome 兩者都支援.

所以對網頁設計者來說多種瀏覽器支援與不支援是很擾民. 如果用以前的觀念去寫的確很麻煩如下 :

1
2
3
4
5
6
7
8
9

<video id="theVideo" src="http://liho.tw/movie_file.ogg"  width="480" height="320" controls="controls">
Your browser does not support the video tag.
</video>
 
<script type="text/javascript">
if (navigator.appVersion.indexOf("Safari") != -1) {
    document.getElementById('theVideo').src="http://liho.tw/movie_file.mov";
}
</script>

上列範例, 只要遇到 瀏覽器有 “Safari” 字眼. 就使用mp4格式播放. 因為 ogg safari 不支援. 不過上面的示範是比較不妥當的示範.

請看一下 html5 比較正規的寫法

1
2
3
4
5

<video width="480" height="320" controls="controls">
    <source src="http://liho.tw/movie_file.ogg" type="video/ogg" />
    <source src="http://liho.tw/movie_file.mov" type="video/mp4" />
Your browser does not support the video tag.
</video>

這樣瀏覽器就會找到適當的檔案播放. 也不用去判斷使用者使用怎樣的瀏覽器. 省了很多瑣碎的時間.