4.3　使用HTML5音頻和視頻

現代瀏覽器都支持HTML5的audio元素和video元素，如IE 9.0+、Firefox 3.5+、Opera 10.5+、Chrome 3.0+、Safari 3.2+等。

4.3.1　使用<audio>標簽

視頻講解

<audio>標簽可以播放聲音文件或音頻流，支持Ogg Vorbis、MP3、WAV等音頻格式，其用法如下。

    <audio src="samplesong.mp3" controls="controls"></audio>

其中src屬性用于指定要播放的聲音文件，controls屬性用于設置是否顯示工具條。<audio>標簽可用的屬性如表4.3所示。

表4.3　<audio>標簽支持屬性

    <audio src=" test.mp3" controls="controls">
    您的瀏覽器不支持audio標簽。
    </audio>

替換內容可以是簡單的提示信息，也可以是一些備用音頻插件，或者是音頻文件的鏈接等。

【示例1】<audio>標簽可以包裹多個<source>標簽，用來導入不同的音頻文件，瀏覽器會自動選擇第一個可以識別的格式進行播放。

    <audio controls="controls">
       <source src="medias/test.ogg" type="audio/ogg">
       <source src="medias/test.mp3" type="audio/mpeg">
    您的瀏覽器不支持audio標簽。
    </audio>

以上代碼在Chrome瀏覽器中的運行結果如圖4.8所示，可以看到出現一個比較簡單的音頻播放器，包含了播放、暫停、位置、時間顯示、音量控制等常用控件按鈕。

圖4.8　播放音頻

【補充】

<source>標簽可以為<video>和<audio>標簽定義多媒體資源，它必須包裹在<video>或<audio>標識符內。<source>標簽包含3個可用屬性：

　media：定義媒體資源的類型。

　src：定義媒體文件的URL。

　type：定義媒體資源的MIME類型。如果媒體類型與源文件不匹配，瀏覽器可能會拒絕播放。可以省略type屬性，讓瀏覽器自動檢測編碼方式。

為了兼容不同瀏覽器，一般使用多個<source>標簽包含多種媒體資源。對于數據源，瀏覽器會按照聲明順序進行選擇，如果支持的不止一種，那么瀏覽器會優先播放位置靠前的媒體資源。數據源列表的排放順序應按照用戶體驗由高到低，或者服務器消耗由低到高列出。

【示例2】下面示例演示了如何在頁面中插入背景音樂：在<audio>標簽中設置autoplay和loop屬性，詳細代碼如下所示。

    <audio autoplay loop>
        <source src="medias/test.ogg" type="audio/ogg">
        <source src="medias/test.mp3" type="audio/mpeg">
    您的瀏覽器不支持audio標簽。
    </audio>

4.3.2　使用<video>標簽

視頻講解

<video>標簽可以播放視頻文件或視頻流，支持Ogg、MPEG 4、WebM等視頻格式，其用法如下。

    <video src="samplemovie.mp4" controls="controls"></video>

其中，src屬性用于指定要播放的視頻文件，controls屬性用于提供播放、暫停和音量控件。<video>標簽可用的屬性如表4.4所示。

表4.4　<video>標簽支持屬性

【補充】

HTML5的<video>標簽支持3種常用的視頻格式，簡單說明如下。

　Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。

　MPEG 4：帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件。

　WebM：帶有VP 8視頻編碼和Vorbis音頻編碼的WebM文件。

瀏覽器支持情況：Safari 3+、Firefox 4+、Opera 10+、Chrome 3+、IE 9+等。

    <video src=" test.mp4" controls="controls">
    您的瀏覽器不支持video標簽。
    </video>

【示例1】下面示例使用<video>標簽在頁面中嵌入一段視頻，然后使用<source>標簽鏈接不同的視頻文件，瀏覽器會自己選擇第一個可以識別的格式。

    <video controls>
       <source src="medias/trailer.ogg" type="video/ogg">
       <source src="medias/trailer.mp4" type="video/mp4">
    您的瀏覽器不支持video標簽。
    </video >

以上代碼在Chrome瀏覽器中運行時，當鼠標經過播放畫面，可以看到出現一個比較簡單的視頻播放控制條，包含了播放、暫停、位置、時間顯示、音量控制等常用控件，如圖4.9所示。

當為<video>標簽設置controls屬性，可以在頁面上以默認方式進行播放控制。如果不設置controls屬性，那么在播放的時候就不會顯示控制條界面。

【示例2】通過設置autoplay屬性，不需要播放控制條，音頻或視頻文件就會在加載完成后自動播放。

圖4.9　播放視頻

    <video autoplay>
        <source src="medias/trailer.ogg" type="video/ogg">
        <source src="medias/trailer.mp4" type="video/mp4">
    您的瀏覽器不支持video標簽。
    </video >

也可以使用JavaScript腳本控制媒體播放，簡單說明如下：

　load()：可以加載音頻或者視頻文件。

　play()：可以加載并播放音頻或視頻文件，除非已經暫停，否則默認從開頭播放。

　pause()：暫停處于播放狀態的音頻或視頻文件。

　canPlayType(type)：檢測video元素是否支持給定MIME類型的文件。

【示例3】下面示例演示如何通過移動鼠標來觸發視頻的play和pause功能。設計當用戶移動鼠標光標到視頻界面上時，播放視頻；如果移出鼠標光標，則暫停視頻播放。

    <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
       width="400px" height="300px">
       <source src="medias/trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
       <source src="medias/trailer.mp4" type='video/mp4'>
    </video>

上面代碼在瀏覽器中預覽，顯示效果如圖4.10所示。

圖4.10　使用鼠標控制視頻播放