HTML5 第三篇:HTML5 Video元素

瀏覽器支持
Internet Explorer 9, Firefox, Opera, Chrome, 和Safari都支持。
IE8及其更早的瀏覽器不支持。




HTML5定義了一個統一元素來指定視頻和音頻的插入和顯示,如下:
<video width="320" height="240" controls="controls" id="jk2u">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video> 

以上的控制屬性可以添加視頻相關的控制,例如,播放,暫停和音量。

當然,如果必要我們也需要添加高度和寬度。如果高和寬設定後,頁面加載後針對這個視頻的區域的大小會預留出來。如果沒有相關高和寬的屬性,瀏覽器則不能正確預留顯示視頻區域。效果就是頁面加載過程中,頁面佈局可能變化。

你應該在<video>和</video>元素內容間加入文字內容,這樣可以保證如果瀏覽器不支持video標簽。頁面能夠顯示正確的文字。

video標簽允許加入多個<source>元素。這些元素可以鏈接到不同的視頻文件。當然,瀏覽器會使用第一個識別出的格式。

視頻和音頻格式和瀏覽器支持

目前,<video>標簽支持3類文件格式 :MP4, webM和Ogg,如下:



HTML5視頻標簽
<source> 為video或者movie定義多個媒體源
<track> 定義播放器中的媒體元素的文字曲目信息
<video>定義一個視頻或者電影



留言