HTML5多媒體組件的使用——第一部分：視頻

毫無疑問，關於HTML5的一個最受歡迎的以及談論最多的特性是其在不借助諸如Flash Player等第三方插件的情況下，直接在你的網頁上嵌入視頻組件的能力。

浏覽器提供原生支持視頻的新能力使得網頁開發人員更易於在不依賴於外置插件有效性的情況下，在他們的網站上添加視頻組件。由於蘋果公司現階段在iPhone和iPad上使用的Flash技術的局限性，傳輸HTML5視頻的能力就顯得尤為重要了。

這篇教程主要向你介紹video元素及其屬性，以及它所支持的不同的視頻類型。這是這一系列三篇教程中的第一篇，主要涵蓋了video（標簽），audio標簽以及這兩種標簽使用的自定義控制等方面的內容。

視頻服務：兩項技術的快速比較

 

如果你使用Flash Player創建一個在網站上播放的簡單的MP4視頻，你可能會用到下面的代碼：

 

 

<object type="application/x-shockwave-flash" 
data="player.swf?videoUrl=myVideo.mp4&autoPlay=true" height="210" width="300"> 
<param name="movie" value="player.swf?videoUrl=myVideo.mp4&autoPlay=true"> 
</object> 

 

如果使用的是HTML5，你可以使用以下代碼：

 

 

<video src="myVideo.mp4" controls autoplay width="300" height="210"></video> 

 

當然，這個HTML5示例是極端簡化了的，但是它所實現的功能是一樣的，你也可以看出這是多麼的簡單。

 

視頻編碼解碼器

 

視頻編碼解碼器是一款可以對特定文件格式的視頻進行編碼或解碼的軟件。雖然HTML5標准最初強制支持Theora Ogg視頻編碼解碼器，但在受到Apple和Nokia的反對之後，這個要求就從標准中去除掉了。

令人遺憾的是，這就意味著不同的浏覽器支持不同的編碼解碼器，這聽起來確實讓人痛苦啊。但最近情況有所改善，你只需要（向不同的浏覽器）提供兩種不 同格式的視頻內容：向Safari和Internet Explorer 9提供MP4/H.264格式視頻，向Firefox，Chrome和Opera提供WebM格式視頻。Firefox也支持Theora Ogg，但在版本4之後就開始支持WebM格式了。