在 HTML5 中处理媒体

除非你过去一年左右一直隐居在某个偏远岛屿，否则你很可能已经听说了关于 HTML5 的热议和炒作。不，HTML5 不能治愈大多数疾病，也不能终结世界饥饿，但它势必将重塑富互联网应用程序的格局。随着对新 HTML 标准的炒作，将讨论拉回现实很重要。以下是你需要了解的关于此新 HTML 规范的重要事实。

• HTML5 是自 1999 年以来的第一个新版本规范——此后，Web 发生了巨大的变化。
• HTML5 将成为 HTML、XHTML 和 HTML DOM 的新标准。
• HTML5 提供了一种标准的媒体播放方式——这是一个关键优势，因为之前在没有浏览器插件的情况下，网页上没有标准的媒体播放方式，并且不能保证每个浏览器都会支持该插件。
• HTML5 仍处于开发中，但大多数现代浏览器都支持部分 HTML5 标签。

当 Silverlight 1.0 于 2007 年发布时，微软吹捧其视频和音频播放功能是主要特性，也是将 Silverlight 视为 Flash 替代方案的一个主要原因——Flash 在全球 95% 的浏览器中都得到了某种程度的支持。截至撰写本文时，Silverlight 在全球约 75% 的浏览器中得到支持，大约每四台计算机中有三台。但如果你想播放媒体，并且不想忍受插件的麻烦或依赖性，HTML5 就是答案。

为了看到使用 HTML5 视频标签和传统对象标签播放媒体之间的区别，请参考**图 1**中的示例。

图 1 HTML 视频标签与对象标签播放媒体的对比

1.  <section>
2.      <h1>Using the HTML5 Video tag to play video</h1>
3.      <video src="video1.mp4" >
4.      </video>
5.  </section>
6.  <section>
7.      <h1>Using the Object tag to play media using the Flash plug-in</h1> 
8.      <object type="application/x-shockwave-flash"
9.                 data="player.swf" width="290" height="24">
10.        <param name="movie" value="player.swf">
11.    </object>
12.</section>

那么，这有什么大不了的呢？这两个示例都简单易于实现。但这里重要的点是，由于 <video> 标签是标准，因此它应该用于播放媒体将不再有疑问。你不必猜测浏览器是否安装了某个特定插件的某个特定版本来播放你的媒体。标准部分一直是 HTML 所欠缺的。

HTML5 中支持的媒体格式

要在你的下一个 HTML5 应用程序中使用媒体，你需要了解支持的格式。HTML5 支持 AAC、MP3 和 Ogg Vorbis 作为音频格式，以及 Ogg Theora、WebM 和 MPEG-4 作为视频格式。

尽管 HTML5 支持这些媒体格式，但并非所有浏览器都支持所有格式。**图 2**显示了当前浏览器及其支持的媒体格式。

图 2 当前浏览器中的媒体支持情况

浏览器	视频格式			音频格式
	Ogg Theora	H.264	VP8 (WebM)	Ogg Vorbis	MP3	Wav
Internet Explorer	手动安装	9.0	手动安装	否	是	否
Mozilla Firefox	3.5	否	4.0	是	否	是
Google Chrome	3.0	否	6.0	是	是	是
Safari	手动安装	3	手动安装	否	是	是
Opera	10.50	否	10.60	是	否	是

使用 Video 标签

要在 HTML5 页面中播放视频，只需使用 <video> 标签，如下所示：

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

src 属性（http://www.w3.org/TR/html5/video.html#the-source-element）设置要播放的视频的名称或名称列表，controls 的布尔值开关决定是否显示默认播放控件。在设置 video 标签时，你还可以使用另外两个布尔属性——autoplay 和 loop。**图 3**列出了每个属性及其值。

图 3 Video 标签属性

Attribute	值	描述
音频	Muted	定义音频的默认状态。目前只允许 muted（静音）。
Autoplay	Autoplay	如果存在，视频将在就绪后立即开始播放。
Controls	控件	添加播放、暂停和音量控件。
Height	像素	设置视频播放器的高度。
Loop	循环	如果存在，视频将在每次播放完毕后重新开始播放。
Poster	url	指定代表视频的图像的 URL。
Preload	Preload	如果存在，视频将在页面加载时加载并准备好播放。如果存在 Autoplay，则忽略此设置。
Src	url	要播放的视频的 URL。
Width	像素	设置视频播放器的宽度。

以下代码展示了在常见场景下 video 播放器的一些关键属性，包括设置高度和宽度、autoplay、loop 和 controls 属性，这将显示播放、暂停和音量控件以及一个备用的错误消息。

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

你还可以使用 type 属性和 source 元素中的 codec 来设置特定的 MIME 类型。这些示例使用 type 属性来设置 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) level 3 and Low-Complexity
5.	  AAC audio in MP4 container -->
6.	<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

你可以在 HTML 或 JavaScript 中设置属性。以下代码展示了如何在 HTML 和 JavaScript 中设置布尔值 controls 属性。

<!-- 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 的备用消息。

1. <video controls>
2.     <source src="video1.mp4" />
3.     <source src="video1.ogv" />
4.     <source src="video1.webm" />
5.     <p>This browser does not support HTML5 video</p>
6. </video>

如果你想确保你的视频能够播放，你可以包含 object 标签来播放 Flash 版本，如下所示：

1. <video controls>
2.     <source src="video1.mp4" />
3.     <source src="video1.ogv" />
4.     <source src="video1.webm" />
5.     <object data="videoplayer.swf">
6.         <param name="flashvars" value="video1.mp4">
7.         HTML5 Video and Flash are not supported
8.     </object>
9. </video>

你还可以使用 JavaScript 通过检查 canPlayType 属性来判断浏览器是否支持某种视频格式，如下所示：

1.	var video = document.getElementsByTagName('video')[0];
2.	if (video.canPlayType)
3.	   { // video tag supported
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 not supported
4.	</video>

通过使用 poster 属性，你可以在表单中显示一个图像来代替视频。通常，你会在表单中显示视频列表或单个视频，因此通过图像方便地展示视频预览可以提供更好的用户体验。以下是 poster 属性的实际应用：

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

最后，通过使用一点 JavaScript 和基本的 HTML，你可以创建一个更具交互性的视频播放器。**图 4**展示了如何在表单中添加一个视频播放器并使用 JavaScript 响应用户对控件的输入。

图 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.	<input type="button" value="Play" onclick="video.play()">
12.	<input type="button" value="Pause" onclick="video.pause()">

要获取播放视频的事件和功能的完整列表，请查看规范的这一部分：http://www.w3.org/TR/html5/video.html#playing-the-media-resource。

使用 Audio 标签

使用 audio 标签与使用 video 标签非常相似：你将一个或多个音频文件传递给控件，浏览器支持的第一个文件将被播放。

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

**图 5**列出了 audio 标签中可用的属性。该控件不需要像视频播放器那样显示，因此像 height、width 和 poster 这样的属性不包含在内。

图 5 Audio 标签属性

Attribute	值	描述
Autoplay	autoplay	如果存在，音频将在就绪后立即开始播放。
Controls	controls	将显示播放按钮等控件。
Loop	loop	如果存在，音频将在播放到末尾时重新开始播放（循环）。
Preload	preload	如果存在，音频将在页面加载时加载并准备好播放。如果存在 autoplay，则忽略此设置。
Src	url	要播放的音频的 URL。

与 video 标签一样，你可以将多个文件传递给 audio 标签，并且浏览器支持的第一个文件将被播放。你还可以使用备用消息，当浏览器不支持 audio 标签时，如下所示：

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

摘要

HTML5 是 Web 的下一个标准，根据你定位的浏览器，你现在就可以开始使用一些新标签，如 audio 和 video。然而，在使用 HTML5 时要小心，因为并非所有浏览器都支持新标签，即使一个浏览器支持，它也可能不支持所有媒体格式。如果你正在使用支持 HTML5 的现代浏览器，你仍然需要付出额外的努力来处理所有格式的媒体，以确保用户的成功。以下是一些优秀的 Web 资源，它们提供了浏览器支持信息以及确保 HTML5 媒体成功所需的所有其他信息：

• http://www.w3.org/TR/html5/video.html
• http://dev.w3.org/html5/spec/Overview.html
• http://w3schools.com/html5/default.asp
• http://html5test.com/
• https://caniuse.cn/