使用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	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属性 (http://www.w3.org/TR/html5/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.              οnerrοr="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()">

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

 

译注: 作者的代码可能会让你有些疑问。看的时候，要注意分辨作者可能是使用多种方式来实现同一个功能。以最后一个代码为例，其中5~7行是1~2行的另两种写法。 

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

*muteVideo是静音状态切换函数

*playVideo函数在没有video控件时会添加一个控件，如果已经存在就播放。

[javascript]  view plain copy print ?

1. function addSourceToVideo(element,src,type)  
2. {  
3.  var source = document.createElement('source');  
4.  source.src = src;  
5.  source.type= type;  
6.    
7.  element.appendChild(source);  
8. }  
9.   
10. function insertVideo(src,type,width,height)  
11. {  
12.  var vid = document.createElement("video");  
13.    
14.  vid.controls="controls";  
15.  vid.width = width;  
16.  vid.height=height;  
17.  vid.id = "video_control";  
18.     vid.muted= false;  
19.    
20.  addSourceToVideo(vid,src,type);  
21.    
22.  document.getElementById("show").appendChild(vid);  
23. }  
24.   
25. function muteVideo()  
26. {  
27.  var vid = document.getElementById("video_control");  
28.    
29.  if(vid == undefined)  
30.  return;  
31.    
32.  if (vid.muted==undefined || !vid.muted)  
33.  {  
34.  vid.muted = true;  
35.  }  
36.  else  
37.  {  
38.  vid.muted = false;  
39.  }  
40. }  
41.   
42. function playVideo()  
43. {  
44.     var video = document.getElementById("video_control");  
45.       
46.     if(video==undefined)  
47.     {  
48.      insertVideo("files/happyfit2.mp4","video/mp4",604,256);  
49.      video = document.getElementById("video_control");  
50.     }  
51.   
52.  video.play();  
53. }  

 参考:掌握HTML5中的多媒体--音频(audio)

原文地址:Working with Media in HTML5

作者:Jason Beres

转载请注明出处:http://blog.csdn.net/horkychen