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

horky發表於2012-08-06
HTMLIDE

除非你一直生活在一個偏遠的島嶼上,過去一年左右的時間,你應該已經聽說過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

No

Mozilla Firefox

3.5

No

4.0

Yes

No

Yes

Google Chrome

3.0

No

6.0

Yes

Yes

Yes

Safari

手動安裝

3

手動安裝

No

Yes

Yes

Opera

10.50

No

10.60

Yes

No

Yes

 

使用視訊標籤<video>

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

1. <videosrc=”video.mp4″controls/>

src屬性 (https://www.w3.org/TR/2011/WD-html5-20110113/video.html#the-source-element) 裝置要播放視訊的名稱(可以多個), control的布林值用來調整是否顯示播放控制欄. 完整的屬性列表如下所示:

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

目標視訊的URL.

 Width

Pixels

指定播放器的寬度，以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標籤,如下：

1. <videocontrols>

2.     <sourcesrc=”video1.mp4″/>

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

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

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()”>

完整的事件和特性列表，參考https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource.

 

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

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

*muteVideo是靜音狀態切換函式

*playVideo函式在沒有video控制元件時會新增一個控制元件，如果已經存在就播放。

function addSourceToVideo(element,src,type)
{
 var source = document.createElement(`source`);
 source.src = src;
 source.type= type;
 
 element.appendChild(source);
}

function insertVideo(src,type,width,height)
{
 var vid = document.createElement("video");
 
 vid.controls="controls";
 vid.width = width;
 vid.height=height;
 vid.id = "video_control";
    vid.muted= false;
 
 addSourceToVideo(vid,src,type);
 
 document.getElementById("show").appendChild(vid);
}

function muteVideo()
{
 var vid = document.getElementById("video_control");
 
 if(vid == undefined)
 return;
 
 if (vid.muted==undefined || !vid.muted)
 {
 vid.muted = true;
 }
 else
 {
 vid.muted = false;
 }
}

function playVideo()
{
    var video = document.getElementById("video_control");
    
    if(video==undefined)
    {
     insertVideo("files/happyfit2.mp4","video/mp4",604,256);
     video = document.getElementById("video_control");
    }

 video.play();
}

 參考:掌握HTML5中的多媒體–音訊(audio)

原文地址:Working with Media in HTML5

作者:Jason Beres

轉載請註明出處:http://blog.csdn.net/horkychen

 


相關文章