HTML5多媒体组件的使用——第一部分：视频--HTML5中文学习网

要求

必备知识

要充分利用本文，需要熟悉HTML。

用户级别

中级

范例文件

HTML5Video.zip (30.9 MB)

毫无疑问，关于HTML5的一个最受欢迎的以及谈论最多的特性是其在不借助诸如Flash Player等第三方插件的情况下，直接在你的网页上嵌入视频组件的能力。

浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，传输HTML5视频的能力就显得尤为重要了。

这篇教程主要向你介绍video元素及其属性，以及它所支持的不同的视频类型。这是这一系列三篇教程中的第一篇，主要涵盖了video（标签），audio标签以及这两种标签使用的自定义控制等方面的内容。

注意：你可以通过下载，研究sample files（示例文件），自己探究一些示例代码以及这篇文章中列举出来的一些基本概念。

视频服务：两项技术的快速比较

如果你使用Flash Player创建一个在网站上播放的简单的MP4视频，你可能会用到下面的代码：

<object type="application/x-shockwave-flash"    data="player.swf?videoUrl=myVideo.mp4&autoPlay=true"     height="210" width="300">    <param name="movie"    value="player.swf?videoUrl=myVideo.mp4&autoPlay=true"> </object>

如果使用的是HTML5，你可以使用以下代码：

<video src="myVideo.mp4" controls autoplay width="300" height="210"></video>

当然，这个HTML5示例是极端简化了的，但是它所实现的功能是一样的，你也可以看出这是多么的简单。

视频编码解码器

视频编码解码器是一款可以对特定文件格式的视频进行编码或解码的软件。虽然HTML5标准最初强制支持Theora Ogg视频编码解码器，但在受到Apple和Nokia的反对之后，这个要求就从标准中去除掉了。

令人遗憾的是，这就意味着不同的浏览器支持不同的编码解码器，这听起来确实让人痛苦啊。但最近情况有所改善，你只需要（向不同的浏览器）提供两种不同格式的视频内容：向Safari和Internet Explorer 9提供MP4/H.264格式视频，向Firefox，Chrome和Opera提供WebM格式视频。Firefox也支持Theora Ogg，但在版本4之后就开始支持WebM格式了。

当然，也有一种为你的视频内容定义不止一个的视频文件的方法，这个我在稍后就会讲到。

video标签

你在向你的网页上嵌入视频时用到的video元素，包含了几种不同的属性，在表1中列出了其中几项。

表1. video标签属性

属性	描述
src	提供视频文件的URL地址。
autoplay	表明如果可能，网页上的视频应该自动播放。
controls	告知浏览器显示默认视频控制设置。
muted	设置视频的初始音频状态为静音（此属性目前还不为任何浏览器所支持）
loop	表明视频应该连续不断的循环播放（Firefox浏览器目前暂不支持这一属性）
poster	设置显示默认图片，而不是视频的第一帧。
width	指定video元素宽度的像素值。
height	指定video元素高度的像素值。
preload	向浏览器提示视频预加载状态。有三种可能的取值： `none`: 不执行任何的预加载 `metadata`: 只加载视频的元数据，例如持续时间 `auto`: 让浏览器自行决定（默认的）

例如，如果你想视频自动播放，由浏览器提供控制，你只需要使用如下代码：

<video src="myVideo.mp4" autoplay controls></video>

source标签

前面部分的实例中只用到了一个视频文件，使用一种MP4格式。那么你又会如何着手去处理WebM格式视频文件呢？

这就是source元素出现的背景（由来）。一个video元素（标签）可以包含任意数目的source元素（标签），使得你可以为同一个视频指定不同的源。

source标签的使用

source元素包含了表2所示的三个属性。

表2. source标签属性

Attribute	Description
src	视频源的URL地址。
type	视频源的类型，例如video/mp4 or video/webm等。实际使用的编码解码器也可以在这个字符串中指定。
media	视频的预期媒体类型Specified using 指定CSS3 Media Queries，这一属性使你能够为掌上设备指定不同的视频（例如指定尺寸更小，分辨率更低的视频）。

要在同一视频中指定MP4和WebM源，你可以使用以下代码：

<video autoplay controls>    <source src="myVideo.mp4" type="video/mp4">    <source src="myVideo.webm" type="video/webm"> </video> 

当浏览器试图播放视频时，它会逐一核查视频来源列表，直到找到可以播放的视频。因此，由于Firefox不能播放MP4格式文件，它会跳过MP4格式源文件，但它可以流畅的播放WebM格式源文件。

注意，在前面的实例中，由于source标签使用了中的src属性，我把video标签中的src属性移除掉了。如果你在video标签中指定了src属性，它就会覆盖（掉）source标签中的所有src属性。

指定编码解码器

如果你想的话，你可以指定用以编码视频文件的确切的编码解码器。这可以帮助浏览器确定能否播放这一视频。由于很多时候你并不确定真正使用的是哪种编码解码器，最好只是提供文件类型，由播放器自身来决定（能不能播放）。

如果你想指定某一编码解码器，你可以使用如下代码：

<video autoplay controls>    <source src="myVideo.mp4" type='video/mp4; codec="mp4a.40.2"'>    <source src="myVideo.webm" type='video/webm; codec="vp8"'> </video> 

注意编码解码器是如何被添加到type属性的，特别要注意引号的使用以及type和codec之间由分号隔开。在向type属性添加codec是，很容易把引号放错位置，这样就会由于浏览器无法正常解读source元素，使得视频不能正常播放。因此，如果你想明确的指定编码解码器，一定要仔细。

回归传统

当然，你也要向那些继续使用诸如Internet Explorer 8及更低版本，不支持HTML5的浏览器的用户提供相应的解决方案。

由于浏览器会自动忽略它们不能解读的东西，像Internet Explorer 8那样的传统浏览器就会跳过video和source元素，只视它们为不存在。你可以利用这一特性，寻找另外一种替代的显示你的视频的方法，通过一个简单的下载链接或者是像Flash Player那样的第三方插件。

在前面例子的基础上，你可以按照下述方法添加一个同一视频文件的链接：

<video autoplay controls>    <source src="myVideo.mp4" type="video/mp4">    <source src="myVideo.webm" type="video/webm">    <a href="myVideo.mp4">Download the video</a> </video> 

传统的浏览器将会只显示视频文件下载链接。

添加对Flash Player插件的支持也同样很简单：

<video autoplay controls>    <source src="myVideo.mp4" type="video/mp4">    <source src="myVideo.webm" type="video/webm">    <object type="application/x-shockwave-flash"   data="player.swf?videoUrl=myVideo.mp4&autoPlay=true">       <param name="movie" value="player.swf?videoUrl=mVideo.mp4&autoPlay=true">    </object>    <a href="myVideo.mp4">Download the video</a> </video> 

在上面这个例子中，像Internet Explorer 8那样版本较老的浏览器就会在Flash Player中显示视频（如果系统中装有Flash Player），视频的下载链接也会显示。通过提供下载链接以及退回到使用Flash Player等方法，你向那些没有安装Flash Player的用户提供了通过下载视频，然后在电脑上观看的视频访问方法。

数字版权管理

如果你担心其他人可以自由下载，分享你的视频，HTML5视频可能就不是你想要的。不管你使用的是这篇文章中讲到的哪种方法，你都向其他用户提供了你的视频文件的直接URL地址，用户可以自由下载你的视频文件。目前使用的HTML5还不能防止这类事件的发生，在将来的某个时候可能在 HTML5中会出现处理数据版权管理（DRM）的规范的方法，但目前还没有。

想了解更多的关于HTML5和DRM的信息，请参阅W3C's HTML FAQs on this topic。

视频字幕

关于HTML5视频字幕的相关规定最初是HTML5标准的一部分。定义一种WebSRT文件格式，这种格式可以通过使用通常的SRT文件格式被用来指定视频字幕。

稍后重命名为WebVTT（网页视频文本轨道），字幕标准源于HTML5标准，然后自己成为一个标准体系。

WebVTT文件格式

WebVTT文件是一个特殊格式化的文本文件，其文件扩展名为.vtt。文件本身必须是UTF-8编码的，并以type/vtt MIME类型标记。这一类型文件必须在顶端以WebVTTr），新的一行（n），或者是新的一行之后回车（rn）结束。

这类文件中包含许多的cue，用以指定文本和视频文件中字幕的时间定位。

其基本格式如下：

WEBVTT  [unique-cue-identifier] [hh]mm:ss.msmsms --> [hh]mm:ss.msmsms [cue settings] Subtitle text 1 [Subtitle text 2] ... 

（代码中）unique-cue-identifer字符串是可有可无的。它是帮助确定文件中cue的简单字符串。cue定时以一种简单的格式给出，小时（hour）部分可有可无。每一个cue都可以有若干的cue设置，用于文字的对齐和定位。这些在下面将有更详细的介绍。接下来就是字幕的文字部分了，可以在同一行显示，也可以多行显示。

视频文件中个别的cue可以通过这种方式定位不同的时间，通过另起一行分隔每一个cue块。

下面是一个简短的例子：

WEBVTT  1 00:00:10.500 --> 00:00:13.000 Elephant's Dream  2 00:00:15.000 --> 00:00:18.000 At the left we can see... 

你可以使用cue设置来设置视频中显示的字幕文字的位置和对齐方式。其中包含了五种这方面的设置，如表3所示。

表 3. Cue设置

Cue设置	描述
D:vertical \| vertical-lr	文本方向：竖直从左到右或是竖直从右到左。
L:value	行位置，以百分比值表示还是以特定的行号表示。
A:start \| middle \| end	相对于行的文本对齐方式。
T:value	文本位置，以百分比形式表示，相对于视频画面。
S:value	文字大小，以百分比表示。

例如，要把文字定位于行的末端，到视频画面顶端10%的位置，你就会用到下述的cue设置：

2 00:00:15.000 --> 00:00:18.000 A:end L:10% At the left we can see...

你现在了解了如何通过这种方式创建WebVTT文件，为整个视频添加字幕。

track标签

你可能会很想知道WebVTT文件是如何被关联到你的视频中去。答案就是track标签。这个标签也被引入到了HTML5中，使得你可以为诸如video标签的媒体元素指定外源的文本轨道。track标签的属性详见表4。

表 4. track标签属性

属性	描述
kind	用于track定义的内容类型。可以是下面几种取值之一：subtitles，captions，descriptions，chapters，metadata。
src	文本轨道的URL地址，这里指的是WebVTT文件。
srclang	文本轨道资料的语言。
label	文本轨道的用户可读标签。
default	如果存在，表明这是默认文本轨道。

例如，假设你想把名为english-subtitles.vtt的WebVTT文件加载到上述的视频示例中去。你可以使用下述代码来实现：

<video autoplay controls>    <source src="myVideo.mp4" type="video/mp4">    <source src="myVideo.webm" type="video/webm">    <track src="english-subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles"> </video> 

上述代码就把带有英语字幕的WebVTT文件绑定在了你的视频上。当然，在video元素中，你可以使用多个track元素。你可以使用（track元素的）srclang属性指定多种语言的WebVTT文件，实现向视频添加多语言字幕支持。（然后，如果用户的参数设置中并没有指明更为合适的轨迹，default属性就可以被用于追踪默认的轨迹）

浏览器支持

不幸的是，到目前为止，还没有哪一款浏览器直接支持WebVTT，但很多的有效的JavaScript资料库使你可以使用WebVTT文件格式，并为你的视频提供字幕，包括：

所有这些解决措施都支持视频字幕，有些还会提供一些额外的特性。浏览器也开始添加这方面的支持，Safari和Firefox在这方面取得了一些进展，Microsoft最近也推出了关于WebVTT的演示活动，像我们展示供应商对不久的将来将会发展起来的WebVTT支持的严肃态度。