HTML视频简介

此文章复制原来文章，原网址是https://www.html5rocks.com/zh/tutorials/video/basics/#toc-encode

简介

视频标记是 HTML5 功能中备受关注的一个。视频标记通常在媒体中替代 Flash，但并不仅止于此。虽然它加入其他常见 HTML 标记的行列不久，但其能力和在各浏览器之间的支持范围正以惊人的速度增加。如您将在本教程中所看到的，其主要优势在于，自然集成了 CSS 和 JavaScript 等其他网络开发堆栈层以及其他 HTML 标记。

本教程将让您对视频标记有基本了解，并为您显示各种集成其他 HTML5 功能的不同示例，例如 <canvas>。

1. 标记

要使 HTML 视频在您的网站上运行，必须包含以下几行。

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

此代码段使用 <source> 标记，可让您添加多种格式作为后备类型，以免用户的浏览器不支持其中某个格式。有关详情，请参阅下一部分。

您还可以使用能够使语法非常接近图片标记的语法的单个视频格式。此语法不久将成为最常使用的语法，届时所有浏览器都支持一种常用视频格式。

<video src="movie.webm"></video>

目前前一种情况较为常见，因此我们主要着眼于前一种情况。您需要注意的最重要的一点是，确保您的服务器使用 Content-Type 标头以正确的 MIME 类型提供视频文件。否则，视频可能无法正常运行，即使是在网站的本地副本中也不例外。在 Apache httpd.conf 中，只需要添加以下几行即可：

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

如果您的应用通过 Google App Engine 应用提供，您需要向 app.yaml 添加以下形式的内容（每种格式对应一个）：

- url: /(.*\.ogv)
  static_files: videos_folder/\1
  mime_type: video/ogg
  upload: videos_folder/(.*\.ogv)

要提高客户端性能，请务必在处理多种格式时指明 source 标记中的 type 属性。这样，浏览器就能确定可下载并播放的格式。换言之，浏览器不会下载其无法播放的格式，以便提高网站的性能。

2. 视频格式

考虑可作为 zip 文件的视频格式，其中包含已编码的视频流和音频流。您应留意以下三种用于网络的格式（webm、mp4 和 ogv）：

• .mp4 = H.264 + AAC
• .ogg/.ogv = Theora + Vorbis
• .webm = VP8 + Vorbis

视频标记发展的速度实在令人欢欣鼓舞。就在一年前，Safari 还是唯一在稳定版本中支持视频标记的浏览器。而现在，所有新型浏览器均支持 HTML5 视频，包括即将推出的 IE9。至于编解码器，Firefox 浏览器、Chrome 浏览器和 Opera 浏览器都已通过 WebM 项目同意支持 .webm 作为常用视频格式。如果该编解码器已安装到计算机（我们希望以后不会将此作为必需要求），Internet Explorer 也将予以支持。

请注意：在写这篇文章时，Safari 尚不支持 .webm 格式。

以下内容显示了您的浏览器仅能呈现我们提到的三种格式中一种或两种格式的原理（如果您看到了三种格式，应该感到幸运！）：

在写这篇文章时（2010 年 8 月），此代码段是最安全的格式组合，可让您确保所有浏览器都能显示您的视频：

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

请注意：由于 iPad 中的错误，您需要将 .mp4 作为首选才能在该设备上加载视频，直到该错误修复为止。

正如我之前提到的，几乎所有浏览器供应商都同意支持常用视频格式。因此，再过不到一年的时间，最可能在网络上使用的代码将如下所示：

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

使用 .mp4 格式的其中一个主要问题是，其视频编解码器 (h.264) 不是开放的编解码器，且公司为使用 .mp4 格式而需要提供的许可非常难以理解。您可以参阅这个视频章节了解关于该格式的详情。

关于 .mp4 格式的另一个问题是，根据用于解码视频的配置文件，其 type 属性必须比其他格式更加具体。虽然“avc1.42E01E, mp4a.40.2”最为常用，您还是应该仔细检查此配置文件列表进行确认。

虽然 Microsoft 宣布在即将推出的 IE 版本（即 IE9）中支持视频标记和其他 HTML5 元素，但与其他主要浏览器相比，迁移到新版本的用户所占的比例还是较低。那么我们就来看看以下部分：

3. 对当前不支持视频标记的 IE 版本采取哪些措施？

后备 Flash

您还可以使用 Flash 作为后备。您可能需要再次将视频编码成 Flash 播放器兼容的格式，具体取决于您的视频格式。好消息是，Adobe 已承诺在他们的 Flash 播放器中支持 webm 格式，不过具体时间尚不清楚。与 Chrome 浏览器内嵌框架插件相比，这一解决方案最大的缺陷在于，您获得的 Flash 播放器不会保存您之前为视频标记设置的自定义用户界面或改进功能。有关此技术的详情，可参阅 HTML5 音频实施快速指南教程。

4. 为您的视频编码

如果您需要将现有视频编码成我们在上一部分中提到的格式，可以使用 Windows 版和苹果机版 Miro Converter 轻松获得所需格式。该程序无法让您调整太多设置，但能支持最常用的网络输出内容，包括我们在本教程中使用的三种格式。从本质上看，该软件实际上封装了 ffmpeg 和 ffmpeg2theora，可让您通过命令行在 Windows、苹果机和 Linux 中使用，并能让您指定更多参数。访问 divintohtml5.org了解关于该工具的详情。

5. 有趣内容

正如我们在简介部分所说的，视频标记加入 HTML5 系列后最大的优势在于与其他网络开发堆栈层的集成。在以下示例中，我们对可能的应对措施进行了概述。

5.1. 视频 + 其他 HTML

视频播放器现可使用所有常用的 HTML 属性。例如，在以下代码段中，我们通过 tabindex 使键盘能够控制播放器。一些可用于视频标记的新属性也可供音频标记共用，如 loop 和 autoplay，这两种属性的含义不言自明。poster 属性指示最初加载视频和最后加载视频时显示的图片，controls 属性用于表明我们希望浏览器为我们自动呈现控制按钮，而非由我们自行创建自定义控制按钮。使用 preload 属性可让我们在网页加载后立即在后台下载视频，即使视频尚未开始播放也是如此。

<video poster="star.png" autoplay loop controls tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

将视频标记作为本机浏览器元素进行高度集成解决了过去与第三方嵌入式播放器之间可能存在的问题，例如下拉菜单和覆盖在播放器上的 iframe 或动态调整视频周围其他 HTML 元素的大小时怪异的布局行为。

由于系统不会将视频当作嵌入式外来对象处理，因此用户还可以体验到其他一些好处。例如，即使焦点位于播放器自身，页面滚动或敲击键盘等操作也是完全有效的。

请注意：如果您要尝试编写支持多种语法的文档以将 XHTML 语法纳入 HTML5 范围内，那么代码中的属性应采取以下格式：

<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

5.2. 视频 + JS

视频标记附带一系列属性和方法，可让您很好地控制来源于 JS 代码的视频。在以下示例中，您可以实时查看这些属性和方法。

和其他任何 HIML 元素一样，您可以向视频标记附加常用事件，例如拖动事件、鼠标事件、焦点事件等。不过，视频元素会附带众多新事件，用于检测（和控制）视频播放、暂停或结束播放的时间。加载视频资源可能有很多注意事项，因此可使用多个事件对加载过程进行良好的控制，无论是在网络级别（loadstart、progress、suspend、abort、error、emptied、stalled）还是在缓冲级别（loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough）。

其中最简单的方法是，附加 canplay 事件，以便开始执行与视频相关的操作。

video.addEventListener('canplay', function(e) {
  this.volume = 0.4;
  this.currentTime = 10;
  this.play();
}, false);

目前互联网上提供了若干个自定义的播放器控制按钮。在以下示例中，我们使用了一些元素来同时控制两段视频，并使用 playbackRate 属性模拟了快进效果。使用滑块切换两个视频的音量。

  

5.3. 视频 + CSS

正如您所猜测的，由于视频标记是 DOM 中的头等公民，您可以使用传统的 CSS（如边框、不透明度等）使视频标记样式化。另外还有个很酷的功能，那就是您可以使用投影、遮罩、渐变、转换、切换和动画等最新的 CSS3 属性使视频标记样式化。

将鼠标悬停在下一段视频上方，实际查看部分效果。

#video-css.enhanced {
  border: 1px solid white;
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */

  -moz-transform: translate(0, 10px);  /* FF3.5+ */
  -o-transform: translate(0, 10px);  /* Opera 10.5 */
  -webkit-transform: translate(0, 10px);  /* Saf3.1+, Chrome */
}

5.4. 视频 + canvas

画布是另一个在与视频标记一起使用时存在多种可能的 HTML5 元素。

在以下示例中，我们使用 <canvas> 元素的两个功能来导入和导出图片。其中第一个是 drawImage 方法，可让您从三个不同的来源导入图片：图片元素、其他画布元素和 <video> 元素！这就意味着，我们每次运行这个方法时，系统都会将视频当前的帧导入并渲染到画布。

我们使用的第二个 <canvas> 标记功能是 toDataURL 方法，可让您将画布内容导出到图片。点击以下视频的播放键，查看如何每隔 1.5 秒创建视频图片。我们用来导入/导出的画布实际上处于隐藏状态。

 

在以下代码中，您可以看到我们如何通过以视频元素为源的 drawImage 方法简单地创造相隔 1.5 秒的间隔。

video_dom.addEventListener('play', function() {
  video_dom.width = canvas_draw.width = video_dom.offsetWidth;
  video_dom.height = canvas_draw.height = video_dom.offsetHeight;
  var ctx_draw = canvas_draw.getContext('2d');
  draw_interval = setInterval(function() {
    // import the image from the video
    ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
    // export the image from the canvas
    var img = new Image();
    img.src = canvas_draw.toDataURL('image/png');
    img.width = 40;
    frames.appendChild(img);
  }, 1500)
}, false);

在以下示例中，我们作出了进一步解释。如果您加快从视频导入和渲染图片的频率，您就能够在画布中实际模拟相同的视频帧速率。这样，您就可以变换画布中的各种花样，就像在视频中操作一样。

左侧是播放的原视频。中间是我们用来以 33 毫秒为间隔导入图片的画布。右侧是另一个画布，该画布会在从第一个画布导入图片的同时尝试所有转换方式。我们之所以要使用两个画布，是因为这样做比使用单个画布同时进行图片导入和转换的效果要好。