掌握HTML5中的多媒體--視訊(video)

除非你一直生活在一個偏遠的島嶼上,過去一年左右的時間,你應該已經聽說過HTML5的各式炒作。HTML5将重塑富Web應用的未來。

下面 Figure 1的示例展示了HTML5中video标簽與傳統的object标簽的不同.

Figure 1

1.  <section>

2.      <h1>使用HTML5的video标簽播放視訊</h1>

3.      <videosrc="video1.mp4">

4.      </video>

5.  </section>

6.  <section>

7.      <h1>使用Flash插件播放視訊</h1>

8.      <objecttype="application/x-shockwave-flash"

9.                 data="player.swf"width="290"height="24">

10.        <paramname="movie"value="player.swf">

11.    </object>

12.</section>

那麼重要的是什麼呢? 這兩個示例很簡單,也易于實作。因為<視訊>标記是一個用來播放媒體的标準, 你不必猜測浏覽器是否要安裝特定的某個版本插件。這個标準正是HTML之前最為缺少的那部分。

HTML5支援的媒體格式

HTML5支援AAC, MP3 和 Ogg Vorbis三種音頻格式，以及Ogg Theora, WebM 和MPEG-4三種視訊格式.

但并不是所有浏覽器都支援所有的格式。如下表：

Figure 2浏覽器支援的媒體格式

浏覽器

視訊格式

音頻格式

Ogg Theora

H.264

VP8 (WebM)

Ogg Vorbis

MP3

Wav

Internet Explorer

手動安裝

9.0

No

Yes

Mozilla Firefox

3.5

4.0

Google Chrome

3.0

6.0

Safari

Opera

10.50

10.60

使用視訊标簽<video>

在HTML5中播放視訊，直接使用<video>标簽就可以了, 如下所示:

1. <videosrc="video.mp4"controls/>

Figure 3視訊相關的屬懷

屬性

值

描述

 Muted

Muted

定義的音頻的初始狀态.目前僅支援muted.

 Crossorigin

定義目前視訊是否是一個跨域的項目.

 Mediagroup

ID

将多個視訊或音頻集合在一起，并結合MediaController實作同步控制.

 Autoplay

Autoplay

如果指定，視訊會在準備好(如已取得可播放視訊)後自動播放.

 Controls

Controls

添加播放控制及音量控制功能欄.

 Height

Pixels

指定播放器的高度，以pixel為機關.

 Loop

Loop

如果指定，視訊将重複播放.

 Poster

url

指定視訊的預覽圖.

 Preload

Preload

如果指定，視訊會在加頁面加載過程中被加載。當Autoplay被指定時，會被忽略。

 Src

目标視訊的URL.

 Width

指定播放器的寬度，以pixel為機關.

下面是一使用了多個屬性的示例，也包括一個備用(fallback)的錯誤資訊(當浏覽器不支援video标簽時顯示).

1.  <videosrc="video.mp4"width="320"height="240"autoplaycontrolsloop>

2.      Your browser does not support the video tag.

3.  </video>

你也可以使用MIME指定視訊的編碼格式，如下：

1.       <!-- H.264 Constrained baseline profile video (main and extended video compatible)

2.         level 3 and Low-Complexity AAC audio in MP4 container -->

3.       <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

4.       <!-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity

5.         AAC audioin MP4 container -->

6.       <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

你也可使用JavaScript來設定這些屬性. 如下面的代碼示例:

<!—顯示控制欄的三種方式-->

<videocontrols>

<videocontrols="">

<videocontrols="controls">

// JavaScript中顯示控制欄的兩種方式

video.controls = true;

video.setAttribute

       ('controls',

        'controls');

如果無法确定目标浏覽器是否能支援<video>或者你的視訊格式，你最好指定一個回退的資訊，以告訴使用者為什麼沒有到期望的内容。如下所示：

1. <videocontrols>

2.     <sourcesrc="video1.mp4"/>

3.     <sourcesrc="video1.ogv"/>

4.     <sourcesrc="video1.webm"/>

5.     <p>This browser does not support HTML5 video</p>

6. </video>

如果你要確定視訊可以被播放，你可以按照以前的方式加入一個flash的object标簽,如下：

5.     <objectdata="videoplayer.swf">

6.         <paramname="flashvars"value="video1.mp4">

7.         您的浏覽器對HTML5 Video 和 Flash 都不支援

8.     </object>

9. </video>

也可以在JavaScript中使用canPlayType來檢測浏覽器是否可以播放某個格式的視訊：

1.       var video = document.getElementsByTagName('video')[0];

2.       if (video.canPlayType)

3.          { //支援video标簽

4.       if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))

5.             { // it may be able to play

              }

6.               else

7.             {// the codecs or container are not supported

8.               fallback(video);

9.         }

10.      }

如果希望有更明确清晰的提示，可以使用onerror事件監聽器來報告一個錯誤：

1.       <video src="video.mp4"

2.              onerror="fallback(this)">

3.              不支援<video>

4.       </video>

使用poster,你可以在video播放區域顯示一張圖檔來替代，它可以用來顯示視訊的預覽圖。下面是一個示例:

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

最後，使用JavaScript和HTML,你就可以建立一個互動性的視訊播放器。Figure 4 展示如何使用JavaScript添加一個video并響應使用者的控制操作.(譯注:比如Youtue就是采用動态建立video控件的方式來提供視訊播放功能的。)

Figure 4 JavaScript對視訊的控制

1.       var video = document.createElement('video');

2.       video.src ='video1.mp4';

3.       video.controls =true;

4.       document.body.appendChild(video);

5.       var video = new Video();

6.       video.src ='video1.mp4';

7.       var video = new Video('video1.mp4')

8.       <script>

9.           var video = document.getElementsByTagName('video')[0];

10.      </script>

11.      <inputtype="button"value="Play"onclick="video.play()">

12.      <inputtype="button"value="Pause"onclick="video.pause()">

譯注: 作者的代碼可能會讓你有些疑問。看的時候，要注意分辨作者可能是使用多種方式來實作同一個功能。以最後一個代碼為例，其中5~7行是1~2行的另兩種寫法。 

以下是一份動态加入video元件，并可以控制靜音的功能示例:

*muteVideo是靜音狀态切換函數

*playVideo函數在沒有video控件時會添加一個控件，如果已經存在就播放。

作者:Jason Beres