第六十六節，htnl音頻視頻

htnl音頻視頻

 

學習要點：

    1.音頻和視頻概述

    2.video視頻元素

    3.audio音頻元素

本章主要探討HTML5中音頻和視頻元素，經過這兩個原生的媒體元素向HTML頁面中嵌入音頻和視頻。

 

一．音頻和視頻概述

首先，咱們要理解兩個概念：容器（container）和編解碼器(codec)。

1.視頻容器

音頻文件或視頻文件，都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其餘一些元數據。視頻播放時，音頻軌道和視頻軌道是綁定在一塊兒的。元數據包含了視頻的封面、標題、子標題、字幕等相關信息。主流視頻容器支持的格式爲：.avi、.flv、.mp四、.mkv、 .ogg、.webm。

 

2.編解碼器

 音頻和視頻編碼/解碼是一組算法，用來對一段特定音頻或視頻進行解碼和編碼，以便音頻和視頻可以播放。原始的媒體文件體積很是巨大，若是不對其進行編碼，那麼數據量是 很是驚人的，在互聯網上傳播則要耗費沒法忍受的時間；若是不對其進行解碼，就沒法將編碼後的數據重組爲原始的媒體數據。主流的音頻編解碼器：AAC、MPEG-三、Ogg Voribs，視頻編解碼器：H.26四、VP八、Ogg Theora。

 

3.瀏覽器支持狀況

 起初，HTML5規範原本打算指定編解碼器，但實施起來極爲困難。部分廠商已有本身的標準，不肯實現標準；而有一些編解碼器受專利保護，須要支付昂貴費用。最終放棄了統一 規範的要求，致使各個瀏覽器實現本身的標準。

       容器格式        視頻編解碼 音頻編解碼 IE9+ Firefox5+ Chrome13+

         WebM         VP8        Vorbis      ×        √           √

          OGG        Theora      Vorbis      ×        √           √

        MPEG-4       H.264        AAC        √        ×         疑問？

除了上面三款瀏覽器，還有Safari5+支持MPEG-4,Opera11支持WebM和OGG，經過這組數據，只要備好MP4和OGG格式的便可，但對於新的高清標準WebM，固然是很是必要的。由於WebM不但清晰度高，並且免費，不受限制許可的使用源碼和專利權。目前Chrome瀏覽器，爲了推廣WebM格式的視頻。聲稱將來將放棄H.264編碼的視頻，因此有可能在之後的版本中沒法播放MP4的視頻。固然，目前演示的版本仍是支持的。

 

二．video視頻元素

以往的視頻播放，須要藉助Flash插件才能夠實現。但Flash插件的不穩定性常常讓瀏覽器致使崩潰，所以不少瀏覽器或系統廠商開始拋棄它。而取代它的正是HTML5的video元素。

 <video>元素的屬性

        屬性名稱                                 說明

           src       視頻資源的URL

         width       視頻寬度

         height      視頻高度

        autoplay     設置後，表示馬上開始播放視頻

        preload      設置後，表示預先載入視頻

        controls     設置後，表示顯示播放控件

          loop       設置後，表示反覆播放視頻

         muted       設置後，表示視頻處於靜音狀態

         poster      指定視頻數據載入時顯示的圖片

 

 1.嵌入一個WebM視頻

 <video src="3456.mp4" width="800" height="600"></video>

解釋：<video>插入一個視頻，主流的視頻爲.webm，.mp4，.ogg等。src表示資源URL；width表示寬度；height表示高度。

 

2.附加一些屬性

  <video src ="3456.mp4" width="800" height="600" autoplay controls loop muted></video>

效果：

 解釋：autoplay表示自動開始播放；controls表示顯示播放控件；loop表示循環播放；muted表示靜音。

 

3.預加載設置

 <video src="3456.mp4"width="800" height="600"controls preload="none"></video>

 解釋：preload屬性有三個值：none表示播放器什麼都不加載；metadata表示播放以前只能加載元數據（寬高、第一幀畫面等信息）；auto表示請求瀏覽器儘快下載整個視 頻。

 

4.使用預覽圖，定義縮略圖

<video src="3456.mp4" width="600" height="400" controls poster="22.png"></video>

效果：

 解釋：poster屬性表示在視頻的第一幀，作一張預覽圖。

 

5.兼容多個瀏覽器

 <video width="800" height="600" controls poster="img.png"> <!--設置寬度和高度，和縮略圖-->
    <source src="test.webm"> <!--不一樣的瀏覽器，支持不一樣的格式，瀏覽器會根據本身支持的格式來選擇播放-->
    <source src="test.mp4">
    <source src="test.ogg">
    <object>這裏引入flash播放器實現IE9如下，但不必了</object>
 </video>

 解釋：經過<source>元素引入多種格式的視頻，讓更多的瀏覽器保持兼容。

 

二．audio音頻元素

和video元素同樣，audio元素用於嵌入音頻內容，而音頻元素的屬性和視頻元素相似。音頻的支持度和視頻相似，使用<source>元素引入多種格式兼容便可。主流的音頻格式有：.mp3，.m4a，.ogg，.wav。

        屬性名稱                                 說明

           src       視頻資源的URL

        autoplay     設置後，表示馬上開始播放視頻

        preload      設置後，表示預先載入音頻

        controls     設置後，表示顯示播放控件

 

1.嵌入一個音頻

 <audio src="666.mp3" controls autoplay></audio>

效果：

解釋：和嵌入視頻一個道理。

 

2.兼容多個瀏覽器

<audio controls> <!--定義音頻文件，顯示控件-->
    <source src="666.mp3"> <!--各類瀏覽器支持不一樣的格式，瀏覽器根據支持狀況選擇播放-->
    <source src="test.m4a">
    <source src="test.wav">
</audio>

解釋：略。

PS：更多設計到API的JavaScript控制，將在之後的基於JavaScript基礎後講解。