簡介
HTML5是近十年來Web標準最巨大的飛躍。HTML5並非僅僅用來表示Web內容,它也將Web帶入一個成熟的套用平台,在這個平台上,視頻,音頻,動畫,以及同電腦的互動都被標準化。隨著HTML5的發展,各個瀏覽器都已經或即將支持HTML5。在大潮流的推動下,微軟也表示將把HTML5作為IE9的核心,並將全力投入HTML5。
很多平時最喜歡上網看視頻、玩遊戲的朋友經常抱怨不爽,因為網上好多視頻和遊戲都需要安裝Flash外掛程式,並且速度也跟不上!HTML5的出現解決了這一難題。HTML5提供了音頻視頻的標準接口,實現了無需任何外掛程式支持,只需瀏覽器支持相應的HTML5標籤。怪不得都說HTML5是Flash的終結者!Safari5、Firefox4和Chrome6等瀏覽器加入了HTML5技術,可以免除Flash外掛程式的安裝直接播放視頻 !
視頻格式
當前, “視頻 ”元素支持三種視頻格式:
IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
Ogg | √ | √ | √ | √ | |
MPEG 4 | √ | √ | √ | ||
WebM | √ | √ | √ | √ |
Ogg = 帶有 Thedora 視頻編碼和 Vorbis 音頻編碼的 Ogg 檔案
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 檔案
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 檔案
實例
上面的例子使用一個 Ogg 檔案,適用於Firefox、Opera 以及 Chrome 瀏覽器。
要確保適用於 Safari 瀏覽器,視頻檔案必須是 MPEG4 類型。
video 元素允許多個 “源 ”(實際套用src、外語全稱SouRCe)元素。 “源 ”元素可以連結不同的視頻檔案(視頻檔案的來 “源 ”)。
HTML5 Video 標籤
下表中列出來 HTML5 的 Video 標籤:
標籤 | 描述 |
<video> | 定義一個視頻 |
<source> | 定義多種媒體資源,比如<video> 和<audio> |
<track> | 定義在媒體播放器文本軌跡 |
Firefox對MP4的支持
從R21開始, Firefox增強了對MP4的支持,從而使得MP4這一種格式能夠通行所有平台。 但是, 支持程度與作業系統有關。下面是已經支持的OS:
•Android(R20+);
•Windows 7,Win8(R21+);
•Windows Vista(R22+,不支持SP1);
•Windows XP,Mac OS X,iOS,Linux(尚未支持)。
國內瀏覽器的支持情況
瀏覽器\Video | Video(本元素) | src | controls | autoplay | poster | preload | loop | width | height |
ie6 | 否 | - | - | - | |||||
ie7 | 否 | - | - | - | |||||
ie8 | 否 | - | - | - | |||||
ie9 | 是 | - | - | - | |||||
360安全瀏覽器 | 否 | - | - | - | |||||
傲遊2.X | 否 | - | - | - | |||||
傲遊3 | 是 | 是 | 是 | 是 | |||||
騰訊TT | 否 | - | - | - | |||||
世界之窗 | 否 | - | - | - | |||||
FireFox3.5 | 是 | 是 | 是 | 是 | |||||
搜狗瀏覽器 | 否 | 否 | - | - | |||||
Chrome3.0 | 是 | 是 | 是 | 是 | |||||
Safari3.0 | 是 | 是 | 是 | 是 | |||||
oprea10.5 | 是 | 是 | 是 | 是 |
最近有網友使用IE核心瀏覽器登錄優酷等視頻網站觀看視頻時,視頻視窗會出現“您的瀏覽器不支持html5 video ”的字樣,視頻無法觀看,解決辦法是下載一個由Christian Adams開發的IE瀏覽器外掛程式剛剛出現,它可以幫助“老掉牙”的IE支持HTML5的<video>標籤,像Google Chrome, Firefox, Safari和Opera一樣能夠播放HTML5視頻。下載地址見參考資料里的連結