HTML5多媒体组件的使用――第一部分：视频

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

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

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

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

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

如果您使用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相关站点文件格式，并为您的视频提供字幕，包括：

Playr
LeanBack Player
Captionator(CaptionCrunch版本)
MediaElement.js

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

下一步阅读方向

您已经看到了，在您的网页上添加网页hTML5教程视频，以及为传统浏览器用户提供使用Flash Player播放视频内容的复古的解决实用具体的方法是多么的简单。尽管功能很强大，但由于缺乏DRM（数字版权管理）性能，网页hTML5教程视频目前并不适于那些想要保护视频内容的用户使用。同时您也看到了，您在将来如何向您的视频添加字幕，以及您现在如何通过JavaScript资料库实现这一功能。

在这一系列教程中的第二部分内容中，我主要讲解了网页hTML5教程的audio网页元素，在第三部分内容中，您将会学到更多的关于网页hTML5教程多媒体网页元素自定义控制方面的内容。