HTML5嵌入音訊和視訊的方法

HTML5使用audio和video元素來嵌入音訊和視訊內容。可以讓支援HTML5的瀏覽器不需要安裝任何外掛程式就可以播放影片和音訊。

另外也提供了與這兩個標籤相關的JavaScript API，這樣就可以創建我們自己的音視頻控制項咯：

<!-- 嵌入视频 -->
<video id="player"
       src="xxx.ogg"
       poster="mymovie.jpg"
       width="300" height="200">
    Video player not available.
</video>

<!-- 嵌入音频 -->
<audio src="xxx.mp3" id="myAudio">Audio player not available.</audio>

這兩個標籤，都必須包含src 屬性，即要載入的媒體檔案位址。 width 和 height 屬性是指定視訊播放器的大小。 poster 屬性是在載入影片期間會顯示的圖片。位於開始和結束標籤之間的內容是後備內容，即當瀏覽器不支援這兩個標籤時會顯示這些內容。因為不是所有的瀏覽器都支援所有的媒體格式，所以可以指定不同的媒體來源。這時會用到 `` 標籤：

<!-- 嵌入视频 -->
<video id="player">
    <source src="xx.webm" type="video/webm; codecs=&#39;vp8, vorbis&#39;">
    <source src="xx.ogv" type="video/ogg; codecs=&#39;theora, vorbis&#39;">
    Video player not available.
</video>

<!-- 嵌入音频 -->
<audio id="myAudio">
     <source src="xx.ogg" type="audio/ogg">
     <source src="xx.mp3" type="audio/mpeg">
Audio player not available.</audio>

支援這兩個標籤的瀏覽器有這些：IE9 、Firefox 3.5 、Safari 4 、Opera 10.5 、Chrome、iOS 版的 Safari 和 Android 版的 Webkit。

1 屬性

audio 和 video 元素有這些共有的屬性：

##屬性資料型別說明autoplay布林值取得或設定 autoplay 標誌。 buffered#時間範圍已下載的緩衝的時間範圍物件。 bufferedBytes位元組範圍已下載的緩衝的位元組範圍物件。 bufferingRate#整數下載速率，每秒平均接收的位數。 bufferingThrottled布林值是否對緩衝進行節流。 controls布林值取得或設定 controls 屬性，控制瀏覽器內建控制項的顯示與隱藏。 currentLoop##整數媒體檔案已循環的次數。 currentSrc

	#字串	目前播放的媒體檔案的 URL。
currentTime	##浮點數	已經播放的秒數。
defaultPlaybackRate	浮點數	取得或設定播放速度，預設為 1 秒。
duration	浮點數	總播放時間，單位是秒。
ended	布林值	是否已播放結束。
loop	布林值	取得或設定【播放完成後是否再從頭開始播放】。
muted	布林值	取得或設定【是否鏡音】。
networkState	#整數	網路連線狀態；0：空；1：正在載入；2：正在載入原始資料；3：已經載入了第一幀；4：載入完成。
paused	#布林值	是否暫停。
playbackRate	#浮點數	取得或設定【目前的播放速度】。
played	時間範圍	目前已經播放的時間。
readyState	#整數	是否已就緒。 1：資料不可用；1：可以顯示目前影格；2：可以開始播放；3：可以從頭到尾播放。
seekable	##時間範圍	可以搜尋的時間範圍。
seeking	#布林值	播放器是否正移動到媒體檔案的新位置。
src	字串	媒體檔案的來源，可以在任何時候重寫這個來源。
start	浮點數	取得或設定【開始播放的位置】，單位是秒。
totalBytes	整數	目前資源所需的總位元組數。
videoHeight	整數	影片的高度，只適用於 video。
videoWidth	整數	影片的寬度，只適用於 video。
volume	浮點數	取得或設定【目前音量】從 0.0 到 1.0。

#

2 事件

audio 和 video 元素有这些共有的事件：

事件	说明
abort	下载中断。
canplay	可以播放；readyState 为 2。
canplaythrough	播放可以继续，即不会被中断；readyState 为 3。
canshowcurrentframe	当前帧已下载；readyState 为 1。
dataunavailable	没有数据导致不能播放；readyState 为 0。
durationchange	改变了 duration 的值。
emptied	网络连接关闭。
empty	发生错误导致下载停止。
ended	已播放到末尾，所以播放停止。
error	下载期发生网络错误。
load	已加载完成。可能会被废弃，建议使用 canplaythrough。
loadeddata	媒体的第一帧已加载。
loadedmetadata	媒体的元数据已加载。
loadstart	下载已开始。
pause	播放已被暂停。
play	媒体已接受到开始播放的指令。
playing	媒体已开始播放。
progress	正在下载。
ratechange	改变了播放速度。
seeked	搜索结束。
stalled	浏览器正尝试下载，但未接收到数据。
timeupdate	currentTime 被非法更新。
volumechange	改变了 volume 或 muted 值。
waiting	播放暂停，等待下载更多的数据。

---

之所以定义了这么多的事件，就是为了开发人员能够只使用少量的 HTML 和 JavaScript 就可以编写出自定义的音、视频播放器！

3 自定义媒体播放器

 <p class="mediaplayer">
    <p class="video">
        <video id="player"
               src="http://people.mozilla.com/~prouget/demos/resources/videos/billyBrowsers.ogg"
               poster="mymovie.jpg"
               width="300" height="200">
            Video player not available.
        </video>
    </p>
    <p class="controls">
        <input type="button" value="Play" id="video-btn">
        <span id="curtime">0</span><span id="duration">0</span>
    </p>
</p>

现在我们加一些 JavaScript ，就可以自定义一个简单的视频播放器：

//取得元素引用
var player = document.getElementById("player"),
        btn = document.getElementById("video-btn"),
        curtime = document.getElementById("curtime"),
        duration = document.getElementById("duration");//实测，得不到整个视频的总体播放时间

//更新播放时间
duration.innerHTML = player.duration;

//为按钮添加事件处理程序
EventUtil.addHandler(btn, "click", function (event) {
    if (player.paused) {
        player.play();
        btn.value = "Pause";
    } else {
        player.pause();
        btn.value = "Play";
    }
});

//定时更新当前时间
setInterval(function () {
    curtime.innerHTML = player.currentTime;
}, 250);

可以进一步扩展这个视频播放器，让它可以使用更多的属性，监听更多的事件。同样的代码也可以用于 audio 元素。

4 检测编解码器的支持情况

audio 和 video 元素都有一个 canPlayType() 方法，它接收一个格式/编解码器的字符串，返回 “probably”、”maybe”、”“，所以这样这样使用：

if (audio.canPlayType("audio/mpeg")){
      ...
  }

因为真正决定文件是否能够播放的是编码格式，所以建议同时传入 MIME 类型和编解码器，这样检测会更准确：

if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
  ...
}

注意，编解码器必须使用引号！下面列出已得到支持的音/视频格式和编解码器：

音频	字符串	支持的浏览器
AAC	audio/mp4; codecs=”mp4a.40.2”	IE9+、Safari4+、iOS 版的 Safari
MP3	audio/mpeg	IE9+、Chrome
Vorbis	audio/ogg; codecs=”vorbis”	Firefox 3.5+、Chrome、Opera 10.5+
WAV	audio/wav; codecs=”1”	Firefox 3.5+、Chrome、Opera 10.5+

---

视频	字符串	支持的浏览器
H.264	video/mp4; codecs=”avcl.42E01E, mp4a.40.2”	IE9+、Safari4+、iOS 版的 Safari、Android 版 WebKit
Theora	video/ogg; codecs=”theora”	Firefox 3.5+、Chrome、Opera 10.5+
WebM	video/webm; codecs=”vp8, vorbis”	Firefox 4+、Chrome、Opera 10.6+

---

5 Audio 类型

audio 元素有一个原始的 JavaScript 构造函数 Audio，可以利用它来控制什么时候播放音频：

 var audio = new Audio("xxx.mp3");
 EventUtils.addHandler(audio, "canplaythrough", function(event){
     audio.play();
 });

上面的代码实现了这样的功能：当下载完成后自动播放音频。

在 iOS 中，调用 play() 会弹出一个对话框，得到用户许可后才可以播放。

如果想要在一个音频播放完之后在播放另一个音频，可以在 onfinish 事件中调用 play() 方法。

相关推荐：

分享一个简单的HTML5 视频嵌入实例代码

以上是HTML5嵌入音訊和視訊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！