HTML5

發行項
07/23/2015

以 HTML5 處理媒體

Jason Beres

除非您已經活在遠端的島上過去幾年來，您可能聽說謠言和 HTML5 周圍的手法。否，HTML5 會不修整大部分的 illnesses，也不會結束世界飢餓指數，但紛紛重繪的豐富的網際網路應用程式環境。透過新的 HTML 標準手法，很重要帶回給返回地球的討論。以下是您需要知道這個新的 HTML 規格的重要事項：

HTML5 是自 1999年規格的第一個新版本 — Web 此後許多變更。
HTML5 是 HTML、 XHTML 和 HTML DOM 的新標準
HTML5 提供播放媒體的標準方式-金鑰獲益，因為沒有標準的瀏覽器外掛程式，而不能保證每個瀏覽器是否支援外掛程式的網頁中播放媒體。
HTML5 仍在進行中的工作，但大部分現代的瀏覽器有一些 HTML5 標記支援。

Microsoft 時輕易在 Silverlight 1.0 交貨 2007年中，模型的視訊與音訊的播放，主要功能，以及另一種閃動一下之後，請參閱 Silverlight 的主要原因 — 在一個版本或 95%的世界各地的瀏覽器上的另一個支援這種。本文撰寫，Silverlight 都支援大約 75%的世界各地，瀏覽器或約三個 [每隔四部電腦。但如果您想要播放的媒體，而且您不希望麻煩或外掛程式的相依性，HTML5 的答案。

若要查看使用播放媒體的 HTML5 視訊標記和傳統的物件標記之間的差異，請考慮中的範例圖 1。

[圖 1 視訊的 HTML 標籤 vs。若要播放的媒體物件標籤

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

是什麼大不了？這兩個範例是相當簡單並容易實作。但很重要的一點是，因為 <video> 標記是一種標準，會有毫無疑問，它應該是用來播放媒體。您不需要猜測瀏覽器是否有某些特定外掛程式的安裝版本來播放媒體。標準的組件是已遺漏的 HTML。

支援在 HTML5 中的媒體格式

若要使用下一步的 HTML5 應用程式中的媒體，您需要知道支援何種格式。 HTML5 支援 AAC、 MP3 和音訊的 Ogg Vorbis Ogg Theora、 WebM 和 mpeg-4 的視訊。

即使 HTML5 支援這些媒體格式，不過，並非所有瀏覽器都支援每一種格式。 [圖 2 會顯示目前的瀏覽器和其所支援的媒體格式。

在目前的瀏覽器中的 [圖 2 媒體支援

使用視訊的標籤

若要在 HTML5 頁面中播放視訊，只要使用 <video> 標記，如下所示：

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

Src 屬性 (http://www.w3.org/TR/html5/video.html#the-source-element) 設定的名稱或名稱的視訊播放，和控制項的布林參數決定是否預設播放控制顯示。您也可以使用兩個布林值的屬性，[自動播放] 和迴圈 — 設定視訊的標籤時。 [圖 3 列出每個屬性的屬性和它的值。

[圖 3 視訊標記內容

特質	數值	描述
音效	設為靜音	定義音訊的預設狀態。目前，只有靜音允許的。
[自動播放]	[自動播放]	如果有的話，會啟動視訊播放時就準備。
控制項	控制項	新增播放、暫停及音量控制。
Height	像素	設定視訊的播放程式的高度。
Loop	Loop	如果有的話，視訊會重新開始，每次完成。
海報	url	指定代表視訊影像的 URL。
預先載入	預先載入	如果有的話，視訊頁面載入時載入，並已準備好執行。如果出現 [自動播放]，它會被忽略。
Src	url	若要播放視訊的 URL。
Width	像素	設定視訊的播放程式的寬度。

下列程式碼將說明幾個的視訊的播放程式中常見的案例，其中包括設定高度及寬度的索引鍵屬性，[自動播放]、迴圈和控制項屬性，會顯示播放]，請暫停及音量控制以及後援的錯誤訊息。

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

您也可以設定特定的 MIME typeusing 的 type 屬性和轉碼器來源項目中。這些範例會使用 type 屬性來設定 MIME 類型，和媒體的編碼方式：

<!-- H.264 Constrained baseline profile video (main and extended video compatible)
  level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

您可以在 [HTML] 或 [JavaScript，來設定屬性。下列程式碼會示範如何在 HTML 和 JavaScript 設定布林值的控制項屬性。

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

當您不知道在瀏覽器是否將呈現的頁面時，您會需要後援機制來播放媒體。您所要做為列出的視訊格式，因您的視訊，並瀏覽器播放它所支援的第一個。您也可以新增文字做最後的手段，若要讓使用者知道所使用的瀏覽器不支援原生 HTML5 播放視訊。下列程式碼會包含多個視訊來源，以及您在後援訊息，指出沒有 HTML5 的支援。

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

如果您想要確定您的視訊播放時，您可以包含物件標籤，若要播放的快閃的版本，就像這樣：

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

您也可以使用 JavaScript，檢查 [如果支援視訊格式檢查 [canPlayType] 屬性，如下所示：

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

如果您想要做某件事更具表達力不只是後援文字，您就可以使用 on error 事件接聽程式来傳遞至錯誤：

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

您可以使用 [海報] 屬性，指定影像的 URL，以顯示表單上的視訊的位置。通常要顯示的影片清單或單一視訊在表單中，所以需要一個簡單的方法，以顯示視訊的預覽影像的形式提供較佳的使用者經驗。以下是作用中的 [海報] 屬性：

<video src="video1.mp4" poster="preview.jpg" </video>

最後，藉由使用一些 JavaScript 和基本的 HTML，您可以建立互動性更強的視訊播放程式。 [圖 4 示範如何透過 JavaScript 來表單中新增視訊的播放程式以及如何回應使用者輸入至控制項。

[圖 4 互動 JavaScript 視訊

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

如事件與播放的視訊功能的完整清單，請參閱本節中的精華於 http://www.w3.org/TR/html5/video.html#playing-the-media-resource。

使用音訊標籤

使用音訊標籤十分類似使用視訊的標籤: 您將一或多個的音訊檔案傳遞給控制項，然後在播放瀏覽器支援的第一個。

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

[圖 5 列出可用的音訊的標記中的屬性。控制項不需要顯示像視訊的播放程式中，所以不包含內容，例如高度、寬度和海報。

[圖 5 音訊標記內容

特質	數值	描述
[自動播放]	[自動播放]	如果有的話，會啟動音訊播放，因為它已準備。
控制項	控制項	顯示的控制項，例如一個 [播放] 按鈕。
Loop	迴圈	如果有的話，(迴圈) 音訊開始播放一次當它到達結尾。
預先載入	預先載入	如果有的話，音效載入頁面載入時，並且已準備好執行。如果出現 [自動播放]，它會被忽略。
Src	url	播放音效的 URL。

如同視訊的標籤，您可以將多個檔案傳遞到音訊的標籤，第一個支援會播放。您也可以使用後援的訊息時瀏覽器不支援音訊的標記，就像這樣：

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

總結

HTML5 是下一個標準的 web 中，而且取決於您的目標瀏覽器中，您可以開始使用新的標記，例如音訊和視訊，一些現在。當使用 HTML5，不過，因為並非所有瀏覽器支援新的標籤，而且即使其中一個，它可能不支援每一種媒體格式，請務必謹慎。如果您正在使用支援 HTML5 的現代瀏覽器，您仍需要執行額外的工作，來處理您的媒體，以確保使用者成功的所有格式。以下是一些很棒的 Web 資源之瀏覽器支援資訊以及所有其他所需的資訊以確保 HTML5 媒體成功：

Jason Beres 副總裁產品管理、社群，且在宣導 Infragistics 和 spearheads 客戶導向、創新的功能，並在整個 Infragistics 的所有產品的功能。 Jason 是 Microsoft。NET MVP，並為使用中的成員。NET 社群。他說在數十個活動和世界各地的研討會每年。他是主題範圍是從 Visual Basic 和 C# 到 SQL Server 及 Silverlight ；八個書籍的作者他的最新為專業 Silverlight 4 (Wrox，2010年)。您可以到達 Jason 在 jasonb@infragistics.com 或 twitter @ jasonberes 上。

共用方式為