HTML5 音訊和視訊

weixin_34148340發表於2017-08-22
HTML音訊

HTML5 特性，包括原生音訊和視訊支援而無需 Flash。

HTML5 <audio> 和 <video> 標籤讓我們給站點新增媒體變得簡單。我們只需要設定 src 屬性來識別媒體資源，包含 controls 屬性讓使用者可以播放和暫停媒體。

<video>

嵌入視訊

<video src="foo.mp4"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

目前的 HTML5 規範草案還沒有指定瀏覽器應該在 video 標籤中支援哪種視訊格式。但是最常用的視訊格式是：

  • Ogg：帶有 Thedora 視訊編碼器和 Vorbis 音訊編碼器的 Ogg 檔案。
  • mpeg4：帶有 H.264 視訊編碼器和 AAC 音訊編碼器的 MPEG4 檔案。

我們可以使用帶有媒體型別和其他屬性的 <source> 標籤指定媒體檔案。video 元素允許使用多個 source 元素，瀏覽器會使用第一個認可的格式：

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="/html5/foo.ogg" type="video/ogg" />
       <source src="/html5/foo.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

video屬性規範

HTML5 video 標籤可以使用多個屬性控制外觀和感覺以及各種控制功能：

屬性 描述
autoplay 如果指定這個布林值屬性，只要沒有停止載入資料，視訊就會立刻開始自動播放。
autobuffer 如果指定這個布林值屬性，即使沒有設定自動播放，視訊也會自動開始緩衝。
controls 如果指定這個屬性，就允許使用者控制視訊播放，包括音量控制，快進，暫停或者恢復播放。
height 這個屬性以 CSS 畫素的形式指定視訊顯示區域的高度。
loop 如果指定這個布林值屬性，表示允許播放結束後自動回放。
preload preload 屬性是用來快取大體積檔案的。它有三個可選值："none" 不快取，"auto" 快取，"metadata" 只快取檔案元資訊
poster 這是一個影像 URL，顯示到使用者播放或快進。
src 要嵌入的視訊 URL。可選，可以在 video 塊中使用 <source> 元素替代來指定要嵌入的視訊。
width 這個屬性以 CSS 畫素的形式指定視訊顯示區域的寬度。

<audio>

嵌入音訊

HTML5 支援的 <audio> 標籤用於在如下所示的 HTML 或 XHTML 文件中嵌入語音內容。

<audio src="foo.wav" controls autoplay>
   Your browser does not support the <audio> element.
</audio>

當前的 HTML 草案規範還沒有指定瀏覽器應該在 audio 標籤中支援哪種音訊格式。但是最常用的音訊格式是 ogg，mp3和 wav。
我們可以使用帶媒體型別以及其他屬性的的 <source> 標籤指定媒體。Audio 元素允許使用多個 source 元素，並且瀏覽器會使用第一個認可的格式：

<!DOCTYPE HTML>
<html>
<body>
     <audio controls autoplay> 
        <source src="/html5/audio.ogg" type="audio/ogg" /> 
        <source src="/html5/audio.wav" type="audio/wav" /> 
            Your browser does not support the <audio> element.
     </audio>
</body>
</html>

Audio 屬性規範

HTML5 audio 標籤可以使用多個屬性來控制外觀，感受以及各種控制功能：

屬性 描述
autoplay 如果指定這個布林值屬性，只要沒停止載入資料，音訊就會立刻自動開始播放。
autobuffer 如果指定這個布林值屬性，即使沒有設定自動播放，音訊也會自動開始緩衝。
controls 如果指定這個屬性，表示允許使用者控制音訊播放，包括音量控制，快進以及暫停/恢復播放。
loop 如果指定這個布林值屬性，表示允許音訊播放結束後自動回放。
preload 這個屬性指定載入頁面時載入音訊並準備就緒。如果指定自動播放則忽略。
src 要嵌入的音訊 URL。可選，可以在音訊塊裡

處理媒體事件

HTML5 audio 和 video 標籤可以用多個屬性利用 JavaScript 控制各種控制功能：

事件 描述
abort 播放中止時生成這個事件。
canplay 足夠的資料可用並且媒體可以播放時生成這個事件。
ended 播放完成時生成這個事件。
error 發生錯誤時生成這個事件。
loadeddata 媒體第一幀載入完成時生成這個事件。
loadstart 開始載入媒體時生成這個事件。
pause 播放暫停時生成這個事件。
play 播放開始或者恢復時生成這個事件。
progress 定期通知媒體下載進度時生成這個事件。
ratechange 播放速度改變時生成這個事件。
seeked 快進操作完成時生成這個事件。
seeking 快進操作開始時生成這個事件。
suspend 媒體載入被暫停時生成這個事件。
volumechange 音訊音量變化時生成這個事件。
waiting 請求操作（比如播放）被延遲，等待另一個操作完成（比如快進）時生成這個事件。

設定播放的時間點定位

我們可以指定視訊從某時某分某秒開始播放，這是通過設定 currentTime 屬性來實現。

我們可以通過 seekable 屬性來獲得視訊有效的播放時間範圍。它會返回一個 TimeRanges 物件，能夠告訴你有效的開始時間和結束時間。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0);  // 返回開始時間 (秒)
mediaElement.seekable.end(0);    // 返回結束時間 (秒)
mediaElement.currentTime = 122; // 定位到第 122 秒播放
mediaElement.played.end(0);      // 返回已經播放的時間長度(秒)

設定播放範圍

當在網頁裡嵌入視訊/音訊檔案時， <audio> 或 <video> 元素允許我們提供一些額外的資訊來指定播放哪一時間段。實現的方法是在媒體檔案後面跟隨(“#”)格式的資訊。

它的具體語法是這樣的：

#t=[開始時間][,結束時間]

時間的表示方法可以使用秒數，也可以提供一個 ”時:分:秒“ 格式的時間(例如 2:05:01 )。

舉例：

http://www.webhek.com/video.ogg#t=10,20
指定視訊從10秒開始播放，到20秒處結束。
http://www.webhek.com/video.ogg#t=,10.5
指定視訊從頭開始播放到 10.5 秒處。
http://www.webhek.com/video.ogg#t=,02:00:00
指定視訊播放2小時。
http://www.webhek.com/video.ogg#t=60
指定視訊從第60秒開始播放，播放到結束。

相關文章