建置 HTML5 應用程式

  • 發行項

實用的跨瀏覽器 HTML5 音訊和視訊

約翰 · 戴亞

下載代碼示例

時首先介紹了 HTML5 的音訊和視頻標籤，轉碼器和流覽器的不相容問題難於使用和不現實的大型 Web 網站上部署，使他們。標記是很好的寫作實驗代碼或做跨流覽器媒體的發展，公司但 HTML5 媒體 API 用於一般的不太可靠。

今天，事情是不同的。流覽器和 JavaScript 庫已非常成熟，在那裡你可以 — — 並且應該 — — 使用 HTML5 媒體作為預設值將顯示音訊和視頻內容的任何專案。甚至改造現有 Flash 和 Silverlight HTML5 播放的視頻內容已成為相當簡單。在本文中，我會探索播放媒體使用 HTML5 的好處，顯示了一些示例代碼，解決一些重大的問題，開發商面臨和提出解決這些問題的辦法。

HTML5 媒體的好處

使用 HTML5 媒體您可以利用您的 HTML，CSS 和 JavaScript 的技能，而不是學習 Flash 或 Silverlight 的優勢。可以在 HTML 中創建按鈕和控制它們使用 JavaScript，如果你已經知道所有你需要開發 HTML5 媒體。HTML5 媒體具有內置的支援，為標題和字幕使用新的軌道元素和附加功能的建議 — — 如直接用於視頻操作的位元組訪問 — — 現正考慮。

此外，使用 HTML5 視頻和音訊的媒體更好地發揮了如 Flash 或 Silverlight，從而延長電池使用壽命和更平滑的播放外掛程式通過媒體執行。此外，蘋果 iOS 和 Android （以及在 Windows 8 的地鐵樣式流覽器） 的移動設備上運行 Windows Phone 7.5，支援只能通過 HTML5 視頻和音訊播放媒體。一些 Android 設備包括 Flash，但是 Adobe 最近停止移動的快閃記憶體努力中，這意味著 HTML5 將會在未來在移動設備上播放的媒體的唯一方法。

簡單的 HTML5 重播和控制項

在使用 Flash 或 Silverlight 的視頻播放的日子，最簡單的可能標記顯示視頻 （在本例中為 video.mp4） 就會著這樣的事：

    <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
      <param name="src" value="player.swf?file=video.mp4">
      <embed src="player.swf?file=video.mp4" width="640"
        height="360"></embed>
    </object>

比較這些嵌套的物件，參數和嵌入與使用相同的 h.264 編碼視頻播放此 HTML5 視頻標記的標記：

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

它是簡單得多 — — 只是普通的 HTML，需要很少的解釋。 當流覽器下載了足夠多的視頻，以確定其本機的高度和寬度時，它相應地調整大小視頻。 但是，就像使用 img 標籤，最好始終指定的高度和寬度屬性，以便在頁面不需要重排。 此外可以使用樣式屬性指定 （我將使用兩個在下麵的示例中） px 或 %的寬度和高度值。

我添加的屬性就是控制項。 這將告訴流覽器顯示其自身內置播放控制欄，通常包括播放/暫停切換、 進度指示器和音量控制。 控制項是一個布林值的屬性，這意味著它不需要有一個分配給它的值。 更像 XHTML 語法，您可以編寫控制項 ="控制"，但流覽器總是認為是虛假的如果不是現在和真實存在時控制項或分配一個值。

HTML5 介質的屬性和子源標籤

音訊和視頻的元素引入了幾個新的屬性，以確定如何流覽器將向最終使用者現有媒體內容。

  • src 指定單個媒體檔播放 （對於多個源與不同的編碼解碼器，請看下麵的討論）。
  • 海報是前使用者按下播放 （視頻），將顯示的圖像的 URL。
  • 預載入確定何時以及如何流覽器將載入媒體檔使用三個可能的值：無表示視頻不會下載直到使用者啟動播放 ； 中繼資料告訴流覽器下載只是足夠的資料來確定高度、 寬度和媒體 ； 持續時間 汽車讓流覽器決定多少要開始之前，使用者下載的視頻開始播放。
  • 自動播放是用來啟動視頻等載入頁面的布林屬性 （移動設備經常忽略這個保留頻寬）。
  • 迴圈是導致重新開始當它到達末尾的視頻的布林屬性。
  • 靜音是布林屬性指定是否視頻應開始溫和。
  • 控制項是一個布林型屬性，該值指示流覽器是否應顯示其自己的控制項。
  • 寬度 和 高度告訴以某些大小 （僅 ； 視頻顯示的視頻 不能是百分比）。

定時的字幕

流覽器也開始執行跟蹤元素，它提供字幕，字幕，翻譯和視頻的評論。 這裡是視頻軌道的子元素的元素：

    <video id="video1" width="640" height="360" preload="none" controls>
      <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
    </video>

在此示例中，我使用四跟蹤元素的五個可能的屬性：

  • src 是指向 Web 視頻定時文本 (WebVTT) 檔或定時文本標記語言 (TTML) 檔的連結。
  • srclang 是 TTML 檔 （如 en、 專家系統或 ar） 的語言。
  • 種指示文本內容的類型：字幕、 標題、 說明、 章節或中繼資料。
  • 標籤保存選擇跟蹤的使用者顯示的文本。
  • 預設是確定啟動跟蹤元素的布林屬性。

WebVTT 是一個簡單的基於文本的格式，以單行宣言 （WEBVTT 檔） 開始，然後清單開始時間和結束時間以分隔--> 字元，後面兩個時間之間顯示的文本。 這裡是一個簡單的 WebVTT 檔，將在兩個不同的時間間隔顯示兩行文字：

WEBVTT FILE

00:00:02.5 --> 00:00:05.1
This is the first line of text to display.
00:00:09.1 --> 00:00:12.7
This line will appear later in the video.

撰寫本文時，只有互聯網資源管理器 10 平臺預覽和鉻 19 支援軌道的元素，但其他流覽器，可望很快這樣做。 我稍後討論的 JavaScript 庫的一些將支援跟蹤元素添加到流覽器尚未實現，但也有一個名為 captionator.js 的獨立跟蹤庫 (captionatorjs.com) 解析跟蹤標記，將 WebVTT 和 TTML （以及 SRT 和 YouTube SBV） 讀取檔和還沒有本機支援的流覽器提供一個使用者介面。

腳本 HTML5 媒體

較早前，我用控制項屬性來告訴流覽器顯示其本機控制項的頂部的視頻或音訊的標記。 這個問題是每個流覽器都有一組不同的不太可能以匹配您的 Web 網站設計的控制項。 要創建一致的體驗，可以刪除流覽器的控制項，然後將自訂按鈕添加到頁面，您可以控制使用 JavaScript。 您還可以添加事件偵聽器來跟蹤的視頻或音訊播放狀態。 在以下示例中，我已經刪除的控制項的屬性，並添加的視頻，作為基本控制欄下方的標記：

    <video id="video1" style="width:640px; height:360px" src="video.mp4"> </video> 
    <div>
      <input type="button" id="video1-play" value="Play" />
      <input type="button" id="video1-mute" value="Mute" />
      <span id="video1-current">00:00</span>
      <span id="video1-duration">00:00</span>
    </div>

中的簡單 JavaScript 圖 1 將控制視頻播放和顯示當前的視頻中，並將創建中所描述的完整工作播放機圖 2(呈現在互聯網流覽器 9）。 （注意，在 HTML5，類型 ="文本/javascript" 屬性不是需要腳本標記。）

圖 1 控制視頻重播

<script>
// Wrap the code in a function to protect the namespace
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Toggle the mute state
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Show the duration when it becomes available
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var 
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '
0' + minutes : minutes) + ':' +
           (seconds < 10 ? '
0' + seconds : seconds);
}

})();


圖 2 顯示的時間的視頻播放機的工作

中的代碼圖 1 介紹播放和暫停方法、 timeupdate 和 loadedmetadata 的事件和頓了頓，結束，currentTime 和持續時間屬性。完整的 HTML5 媒體 API (w3.org/TR/html5/video.html) 包括更多，可以用於構建全面的媒體播放機。除了，HTML5 媒體標記前面列出的屬性，HTML5 媒體物件有只通過 JavaScript 可訪問其他屬性：

  • currentSrc 描述了使用源標籤時，流覽器當前播放的媒體檔。
  • videoHeight 和 videoWidth 指示本機視頻的尺寸。
  • 卷指定介於 0 和 1，指示該卷之間的一個值。（移動設備忽略這個硬體音量控制對有利。）
  • currentTime 指示當前的播放位置，以秒為單位。
  • 持續時間是以秒為單位的媒體檔的總時間。
  • 緩衝的是一個陣列，指示已下載的媒體檔的哪些部分。
  • playbackRate 的視頻播放的速度 （預設值：1).更改此號去更快 (1.5) 或更慢 （0.5）。
  • 結束指示是否該視頻已達到結束。
  • 暫停視頻開始播放後總是在啟動，然後假為 true。
  • 尋求表示，流覽器正試圖下載並移動到新位置。

HTML5 媒體物件還包括用於腳本編寫下列方法：

  • 玩嘗試載入和播放視頻。
  • 暫停停止當前播放的視頻。
  • canPlayType(type) 檢測哪些流覽器支援的轉碼器。如果您發送的類型如視頻/mp4，流覽器會回答的很有可能，也許，沒有或空白字串。
  • 載入被稱為載入新的視頻，如果您更改 src 屬性。

HTML5 媒體規範提供 21 事件 ； 下麵是一些最常見的：

  • loadedmetadata 已知的持續時間和尺寸時激發。
  • loadeddata 時，流覽器可以播放當前的位置上觸發。
  • 玩視頻不再是暫停或結束時啟動視頻。
  • 玩播放已暫停、 緩衝或尋求後啟動時激發
  • 暫停視頻將暫停。
  • 結束的視頻結尾時激發。
  • 進展指示已下載更多的媒體檔。
  • 尋求流覽器已開始尋求時如此。
  • 緝為 false 時，流覽器已完成尋求。
  • timeupdate 激發起媒體資源。
  • volumechange 火災時靜音或卷屬性已更改。

這些屬性、 方法和事件是展示給使用者豐富的媒體體驗，所有驅動的 HTML，CSS 和 JavaScript 功能強大的工具。在基本示例中圖 1，我第一次在頁上創建的所有元素的變數：

// Find the DOM objects
var video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
  duration = document.getElementById("video1-duration");

然後我將 click 事件添加到我的按鈕控制播放媒體。 我在這裡切換播放和暫停視頻的狀態，並更改該按鈕上的標籤：

    // Toggle the play/pause state
    playBtn.addEventListener("click", function() {
      if (video.paused || video.ended) {
          video.play();
          playBtn.value = "Pause";
      } else {
          video.pause();
          playBtn.value = "Play";
      }
    }, false);

最後，我將事件添加到跟蹤其當前狀態的媒體物件。 在這裡，我聽 timeupdate 事件和更新到當前時間的播放頭，控制欄的秒數分鐘: 秒樣式的格式：

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

HTML5 媒體的問題

不幸的是，HTML5 媒體跨所有流覽器和設備工作不這麼簡單，在我的示例。 我已經提到並不是所有的流覽器支援的軌道元素，和現在將使用的音訊和視頻的標記時，您會遇到的三個其他問題一起解決辦法。 在文章的末尾，我將介紹一些包裝所有這些解決方案到單一的、 可以方便地部署套裝軟體的 JavaScript 庫。

HTML5 音訊和視頻轉碼器支援時使用 HTML5 媒體發展所面臨的第一個問題就是不一致支援視頻和音訊編碼解碼器。 我的示例工作互聯網資源管理器 9 和以後，Chrome 和 Safari，，但他們不會在 Firefox 或歌劇工作因為這些流覽器支援 HTML5 視頻標籤，儘管它們不支援 h.264 轉碼器。 由於到版權問題，流覽器廠商有分成兩大陣營的轉碼器，和我們將熟悉的 HTML5 媒體圖，在圖 3，顯示哪些轉碼器使用哪個流覽器。

圖 3 在各種流覽器中的轉碼器支援

視訊 嘿 IE9 + Chrome Safari 行動 火狐 歌劇
MP4 (h.264/AAC) 否 是 是 是 是 否 否
WebM (VP8/Vorbis) 否 安裝 是 否 否 是 是

 

Ie 流覽器 9++、 野生動物園、 鉻和移動設備 （iPhone、 iPad，Android 2.1 + 和 Windows Phone 7.5 +） 支援 h.264 視頻轉碼器，通常放置在 MP4 的容器。 火狐和歌劇，相比之下，支援 VP8 視頻轉碼器，並置於 WebM 貨櫃內。 Chrome 也支援 WebM，並承諾將刪除某個時刻 h.264 支援。 Ie 流覽器 9++ 可以呈現 WebM 如果由最終使用者已安裝轉碼器。 最後，Firefox、 歌劇和 Chrome 也支援 Theora 轉碼器放置在 Ogg 容器內，但這很大程度上逐步 WebM 對有利 （除非您需要支援 Firefox 3.x），所以我已經將它的圖表和簡單的例子。

對於音訊，流覽器廠商被再次拆分為兩個陣營，與第一組 （互聯網資源管理器 9、 鉻和 Safari） 支援熟悉的 MP3 格式和第二組 （Firefox 和歌劇） 支援的 Vorbis 轉碼器，Ogg 貨櫃內。 許多流覽器也可以發揮的 WAV 檔案格式。 請參閱圖 4。

圖 4 在各種流覽器中的音訊支援

音訊 嘿 IE9 + Chrome Safari 行動 火狐 歌劇
MP3 否 是 是 是 是 否 否
Ogg Theora 否 安裝 是 否 否 是 是
WAV 否 否 也許 是 是 是 是

 

為應對這些差異，視頻和音訊標籤支援多子源標籤，可以讓流覽器選擇他們可以播放媒體檔。 每個源元素具有兩個屬性：

  • src 指定的媒體檔的 URL。
  • 類型指定 mime 類型，也可以選擇特定的編碼解碼器的視頻。

提供 h.264 和 VP8 視頻轉碼器，請使用以下標記：

    <video id="video1" width="640" height="360">
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
    </video>

請注意較早版本的 iOS 和 Android 需要先列出的 MP4 檔。

此標記將在所有現代流覽器中工作。 JavaScript 代碼會控制流覽器決定哪種視頻可以播放。 對於音訊，標記看起來像這樣：

    <audio id="audio1">
      <source src="audio.mp3" type="audio/mp3">
      <source src="audio.oga" type="audio/oga">
    </audio>

如果您正在託管在您自己的伺服器上的音訊或視頻內容，您必須具有正確的 MIME 類型，為每個媒體檔或許多 HTML5 準備流覽器 （如 Ie 和火狐） 不會播放的媒體。 在 IIS 7 中添加 MIME 類型，請轉到功能視圖中，按兩下 MIME 類型、 按一下添加按鈕，在操作窗格中的、 添加的副檔名 （mp4） 和 MIME 類型 （視頻/mp4） 和然後按確定。 然後執行相同計畫為其它類型 （或者說和視頻/webm） 使用。

支援舊版流覽器包括兩個媒體檔 （如 MP4 和 WebM 視頻) 使所有現代流覽器中的 HTML5 媒體工作。 但當舊的流覽器 （例如，互聯網資源管理器中 8） 時遇到視頻標籤，他們無法顯示視頻。 他們會，但是，呈現 HTML 放在 <video> 的開放之間 和關閉 </video> 標記。 下麵的示例包含一條消息，要求使用者獲取更新的流覽器：

    <video id="video1" width="640" height="360" >
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
      <p>Please update your browser</p>
    </video>

要允許非 HTML5 就緒的流覽器的訪問者播放視頻，您可以提供與嵌入 Flash 播放相同的 MP4 您提供互聯網資源管理器 9、 Safari 和鉻，如中所示的替代方案圖 5。

圖 5 視頻播放 flash

 

    <video id="video1" width="640" height="360" >
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
      <object width="640" height="360" classid="clsid:
        d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
          "http://fpdownload.macromedia.com/pub/
          shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
            <param name="SRC" value="player.swf?file=video.mp4">
            <embed src="player.swf?file=video.mp4" width="640"
              height="360"></embed> 
            <p>Please update your browser or install Flash</p>
      </object>
    </video>

此標記提供了一些方法來播放視頻的所有流覽器。 流覽器 HTML5 和 Flash 都不會看到一條消息，要求他們升級。 如何和為什麼此嵌套的標記工作的詳細資訊，請參閱 Kroc 卡門"視頻為大家"(camendesign.com/code/video_for_everybody)。

這種方法有一些缺點，但是。 首先，有大量的標記以維持。 第二，你要進行編碼並存儲至少兩個媒體檔。 與第三，你向頁中添加任何 HTML/JavaScript 控制項將不使用嵌入的 Flash 播放機。 稍後，我會建議可説明您克服這些問題，但首先，讓我們來解決最後一個問題的幾個 JavaScript 庫。

全屏支援 Flash 和 Silverlight 包括全螢幕模式，允許使用者觀看視頻和他們整個螢幕上的其他內容。 您可以通過創建一個簡單的按鈕，並把這種 (Flash) 為 ActionScript 或 C# （用於 Silverlight） 全屏命令來實現此功能。

今天的流覽器都有類似的全屏模式的使用者可以使用鍵盤或功能表命令 （經常 f11 鍵或 Ctrl + F） 觸發。 但是直到最近，沒有等效的 JavaScript API 允許開發者，啟動全螢幕模式，從頁上的按鈕。 這就意味著可以顯示 HTML5 視頻僅在"完整視窗"填充流覽器視窗，但不是整個螢幕。

在 2011 年底，Safari、 鉻和 Firefox 增加支援 W3C 建議全屏的 API，提供了類似于 Flash Silverlight 的功能。 Opera 團隊目前正在對它執行的但互聯網資源管理器中的團隊，撰寫本文時，尚未決定是否將執行 API。 在 Windows 8 的地鐵樣式流覽器將全屏預設情況下，但桌面流覽器使用者將需要輸入全螢幕模式下手動使用功能表選項或 F11 鍵。

在支援它的流覽器中輸入全屏模式，您可以調用 requestFullscreen 方法將元素上的顯示全屏。 要退出全屏顯示的命令是在文檔物件上調用的：document.exitFullscreen 方法。 W3C 建議仍然是進展中的工作，所以我就不去更多的細節在這裡，但我在我的博客跟蹤 API 的狀態：bit.ly/zlgxUA。

HTML5 視頻和音訊 JavaScript 庫

通過將所有相關的代碼集成到單個套裝軟體的開發人員的數目已更容易創建使 HTML5 視頻和音訊的 JavaScript 庫。 一些最開放源碼庫是 MediaElement.js，jPlayer，VideoJS、 Projekktor、 Playr 和 LeanBack。 你會發現與在比較功能的完整清單 praegnanz.de/html5video。

您需要做的就是提供視頻或音訊的標籤和庫會自動生成一組自訂的控制項，以及插入流覽器不支援 HTML5 媒體的 Flash 播放機。 唯一的問題是許多圖書館插入的 Flash 播放機不要總是看或功能類似 HTML5 的球員。 這意味著，您添加的任何 HTML5 事件不會使用 Flash 播放機和您使用的任何自訂 CSS 就看不到，要麼。

在我自己的工作中，我被要求創建一個 HTML5 視頻播放機同步的幻燈片和成績單 （請參見 online.dts.edu/player 演示）。 我們現有的庫的多個 3,000 h.264 視頻檔，它被當作轉碼並不可行他們 WebM 火狐和歌劇。 我們還需要支援較舊的流覽器，如互聯網資源管理器中 8，但單獨的備用 Flash 不會工作，因為它不會對幻燈片和成績單的事件作出回應。

為了克服這些困難，我創建了一個提到的球員以前稱為 MediaElement.js （mediaelementjs.com)。 它是開放原始程式碼 （麻省理工學院/GLPv2） 的 JavaScript 庫，包括特別模仿 HTML5 API 的 Flash 和 Silverlight 的球員。 完全是另外的 Flash 播放機，而不是 MediaElement.js 使用 Flash 只呈現視頻，然後換行視頻，看起來就像 HTML5 API 的 JavaScript 物件。 這有效地升級所有的流覽器，所以他們可以使用的視頻標籤和額外本身不支援的轉碼器。 要使用 jQuery 的單個 h.264 檔與啟動播放機，您需要下麵的代碼：

    <video id="video1" width="640" height="360" src="video.mp4" controls></video>
    <script>
    jQuery(document).ready(function() {
      $("video1").mediaelementplayer();
    });
    </script>

對於不支援的視頻的標記 （如互聯網資源管理器中 8），還是那些不支援 h.264 （Firefox 和歌劇） 的流覽器，MediaElement.js 將插入快閃記憶體 （或 Silverlight，取決於使用者已安裝）"提升"這些流覽器所以他們獲得的 HTML5 介質屬性和事件，我已經介紹墊片。

對於音訊支援，您可以使用單個 MP3 檔：

    <audio id="audio1" src="audio.mp3" controls></audio>

或者，您可以包含單個 Ogg/Vorbis 檔：

    <audio id="audio1" src="audio.oga" controls></audio>

再次，對於不支援音訊的標記 （互聯網資源管理器中 8） 的流覽器或那些不支援 Ogg/Vorbis （Internet Explorer 9++ 和 Safari），MediaElement.js 將插入 shim"提升"這些流覽器，所以他們都起作用，如果他們本身支援的轉碼器。 （注：Ogg/Vorbis 不會可在移動設備上播放。）

MediaElement.js 還支援跟蹤元素，以及本機全螢幕模式下對流覽器的 JavaScript API 實施了。 您可以添加您自己的 HTML5 事件或跟蹤屬性，它將每個流覽器和移動設備中工作。

我希望我已經給你們，儘管幾個怪癖，HTML5 視頻和音訊的元素，特別是當我建議的優秀圖書館與配對是輕鬆地添加到現有的 Web 網站，應任何新專案的預設值。

約翰 · 戴亞 為達拉斯神學院 (dts.edu) 是 Web 開發的總監。在他的博客 j.hn。

多虧了以下技術專家，檢討這篇文章： 約翰 · 赫爾瓦廷 和 布蘭登 Satrom