掌握HTML5中的多媒体--视频(video)

雨点打透心脏的1/2处 2022-06-06 00:12 391阅读 0赞

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过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浏览器支持的媒体格式**

<table style="background:white"> 
 <thead> 
 <tr> 
 <td>浏览器</td> 
 <td colspan="3">视频格式</td> 
 <td colspan="3">音频格式</td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>Ogg Theora</td> 
 <td>H.264</td> 
 <td>VP8 (WebM)</td> 
 <td>Ogg Vorbis</td> 
 <td>MP3</td> 
 <td>Wav</td> 
 </tr> 
 <tr> 
 <td>Internet Explorer</td> 
 <td>手动安装</td> 
 <td>9.0</td> 
 <td>手动安装</td> 
 <td>No</td> 
 <td>Yes</td> 
 <td>No</td> 
 </tr> 
 <tr> 
 <td>Mozilla Firefox</td> 
 <td>3.5</td> 
 <td>No</td> 
 <td>4.0</td> 
 <td>Yes</td> 
 <td>No</td> 
 <td>Yes</td> 
 </tr> 
 <tr> 
 <td>Google Chrome</td> 
 <td>3.0</td> 
 <td>No</td> 
 <td>6.0</td> 
 <td>Yes</td> 
 <td>Yes</td> 
 <td>Yes</td> 
 </tr> 
 <tr> 
 <td>Safari</td> 
 <td>手动安装</td> 
 <td>3</td> 
 <td>手动安装</td> 
 <td>No</td> 
 <td>Yes</td> 
 <td>Yes</td> 
 </tr> 
 <tr> 
 <td>Opera</td> 
 <td>10.50</td> 
 <td>No</td> 
 <td>10.60</td> 
 <td>Yes</td> 
 <td>No</td> 
 <td>Yes</td> 
 </tr> 
 </tbody> 
</table>

** **

**使用视频标签<video>**

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

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

src属性 ([https://www.w3.org/TR/2011/WD-html5-20110113/video.html\#the-source-element][https_www.w3.org_TR_2011_WD-html5-20110113_video.html_the-source-element]) 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示:

**Figure 3视频相关的属怀**

<table style="background:white"> 
 <thead> 
 <tr> 
 <td>属性</td> 
 <td>值</td> 
 <td>描述</td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>&nbsp;Muted</td> 
 <td>Muted</td> 
 <td>定义的音频的初始状态.目前仅支持muted.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Crossorigin</td> 
 <td> </td> 
 <td>定义当前视频是否是一个跨域的项目.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Mediagroup</td> 
 <td>ID</td> 
 <td>将多个视频或音频集合在一起，并结合MediaController实现同步控制.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Autoplay</td> 
 <td>Autoplay</td> 
 <td>如果指定，视频会在准备好(如已取得可播放视频)后自动播放.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Controls</td> 
 <td>Controls</td> 
 <td>添加播放控制及音量控制功能栏.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Height</td> 
 <td>Pixels</td> 
 <td>指定播放器的高度，以pixel为单位.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Loop</td> 
 <td>Loop</td> 
 <td>如果指定，视频将重复播放.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Poster</td> 
 <td>url</td> 
 <td>指定视频的预览图.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Preload</td> 
 <td>Preload</td> 
 <td>如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Src</td> 
 <td>url</td> 
 <td>目标视频的URL.</td> 
 </tr> 
 <tr> 
 <td>&nbsp;Width</td> 
 <td>Pixels</td> 
 <td>指定播放器的宽度，以pixel为单位.</td> 
 </tr> 
 </tbody> 
</table>

下面是一使用了多个属性的示例，也包括一个备用(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="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.     This browser does not support HTML5 video

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

完整的事件和特性列表，参考[https://www.w3.org/TR/2011/WD-html5-20110113/video.html\#playing-the-media-resource][https_www.w3.org_TR_2011_WD-html5-20110113_video.html_playing-the-media-resource].

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

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

\*muteVideo是静音状态切换函数

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

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

原文地址:[Working with Media in HTML5][]

作者:Jason Beres

转载请注明出处:[http://blog.csdn.net/horkychen][http_blog.csdn.net_horkychen]

[https_www.w3.org_TR_2011_WD-html5-20110113_video.html_the-source-element]: https://www.w3.org/TR/2011/WD-html5-20110113/video.html#the-source-element
[https_www.w3.org_TR_2011_WD-html5-20110113_video.html_playing-the-media-resource]: https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource
[HTML5_--_audio]: http://blog.csdn.net/horkychen/article/details/7845271
[Working with Media in HTML5]: http://www.codeproject.com/Articles/365860/Working-with-Media-in-HTML5
[http_blog.csdn.net_horkychen]: http://blog.csdn.net/horkychen