Question

标签使用

既然我们这篇文章就是关于 HTML 的教程，那么我们就不得不回到 HTML 标签上来。

HTML5 允许两种在 web 页面嵌入视频的方法。这两种方法都要使用 <video> 标签。如果你仅仅有一个视频文件，只要简单地将其地址放到 src 属性。这与使用 <img src="..."> 添加图片的方式非常类似：

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

从技术上说，这已经足够了。但是就像 <img> 标签，你还应该在 <video> 标签中添加 width 和 height 属性。 width 和 height 属性可以同你在编码视频时指定的最大宽度和高度的值一致。不要担心小于这个值，浏览器会自动将视频居中显示在 <video> 标签定义的区域。你的视频永远不会被压缩或者拉伸地离谱：

<video src="pr6.webm" width="320" height="240"></video>

默认情况下， <video> 不会有任何播放器的控制工具。你可以使用普通的 HTML、CSS 和 JavaScript 实现自己的控制按钮。 <video> 有诸如 play() 、 pause() 以及名为 currentTime 的可读写属性，还有很多其他属性。这样，你就可以很方便地对视频播放进行控制，从而制作你自己的控制界面。

如果你不想制作自己的界面，你可以让浏览器显示一个内置的控制界面。我们使用下面的代码来达到这一目的：

<video src="pr6.webm" width="320" height="240" controls></video>

在我们继续下面的内容之前，我们还应该了解另外两个可选属性： preload 和 autoplay 。 preload 属性告诉浏览器，当页面加载完成之后马上下载视频。这对那些纯粹为了播放视频的页面是很有用的。另一方面，如果可以预料页面的视频只有少数访问者观看，就可以不设置这个属性，以便让浏览器尽可能减小网络流量。

下面就是让页面加载完成之后马上下载视频的例子（只是下载，并不播放）：

<video src="pr6.webm" width="320" height="240" preload></video>

下面则是另外一个例子，在这个例子中，我们在页面加载完成之后不下载视频：

<video src="pr6.webm" width="320" height="240" preload="none"></video>

autoplay 属性就像它的名字一样：告诉浏览器在页面加载完成之后马上下载视频，并且尽早开始播放。有些人喜欢这样，有些则不喜欢。不过，我们还是要解释一下，为什么在 HTML5 中这么一个属性很重要。有些人希望他们的视频能够自动播放，即使这有可能惹恼他们页面的访问者。如果 HTML5 没有定义一种标准方法自动播放视频，开发者就会尝试使用各种 JavaScript 技巧去这么做。（例如，在 window 的 load 事件中调用视频的 play() 函数。）这会让访问者很难取消。而提供一种标准做法，就可以很方便地给浏览器安装一个扩展，“我不喜欢自动播放视频，让浏览器忽略 autoplay 属性”。

下面的例子是在页面加载完成后马上开始下载视频，并且尽早播放：

<video src="pr6.webm" width="320" height="240" autoplay></video>

在 Firefox 上有一个 Greasemonkey 脚本，安装之后就可以禁止 HTML5 视频的自动播放。它使用 HTML5 的 autoplay DOM 属性，这个属性同 HTML 标签中的 autoplay 是等价的。[ disable_video_autoplay.user.js ]

// ==UserScript==
// @name           Disable video autoplay
// @namespace      http://diveintomark.org/projects/greasemonkey/
// @description    Ensures that HTML5 video elements do not autoplay
// @include        *
// ==/UserScript==

var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
    var elmVideo = arVideos[i];
    elmVideo.autoplay = false;
}

但是稍等一下。如果你还记得我们前面说过的内容，就应该回忆起，一般我们都会有三个视频文件：一个 .ogv 文件，一个 .mp4 文件，一个 .webm 文件。HTML5 提供了一种连接三个文件的方法： <source> 元素。每一个 <video> 都可以有一个或多个 <source> 标签。浏览器按顺序遍历视频源列表，然后选择第一个能够播放的文件进行播放。

这又有了另外的问题：浏览器怎么知道它能播放哪个呢？最坏的解决方案是每一个视频文件都加载一遍，然后尝试播放。虽然这会浪费很大带宽。如果你能够告诉浏览器每一个视频所需要的信息，你就能节省很大一部分网络传输量。为了达到这一目的，我们需要在 <source> 元素中添加 type 属性：

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

我们解释一下上面的代码。 <video> 指定了视频的宽和高，但是它并没有直接指定视频文件。在 <video> 标签中有三个 <source> 元素，每一个 <source> 连接到一个独立的视频文件（通过 src 属性），同时给出了视频格式的信息（通过 type 属性）。

type 属性看起来很复杂——它的确很复杂。它由三个主要的片段组成：容器格式、视频编解码器和音频编解码器。我们从下往上看。对于 .ogv 视频文件，其容器格式是 Ogg，这里使用 video/ogg 代表（从技术上说，这是 Ogg 视频文件的 MIME 类型）。视频编解码器是 Theora，音频编解码器是 Vorbis。这已经相当简单了，除了 type 属性值的写法有些绕。值必须在引号中，这意味着你的属性值和具体类型值需要使用不同的引号：

<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>

WebM 也很类似，但是 MIME 类型不同（video/webm 而不是 video/ogg），视频编解码器也不一样（VP8 而不是 Theora）：

<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>

H.264 视频则复杂一些。还记得我们曾经说过，H.264 视频和 AAC 音频都有不同的“配置”吗？我们使用 H.264 “baseline” 和 AAC “low-complexity” 进行编码，然后使用 MPEG-4 容器。所有这些信息都得在 type 属性里面写明：

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

我们写这么多的目的在于，让浏览器能够首先检查 type 属性，从而知道自己能不能播放这个文聘文件。如果浏览器认为它不能播放，则不需要下载这个文件，甚至一小部分都不需要下载（意思是不需要下载一部分进行测试）。因此你就可以节省带宽，访问者也可以更快的看到视频。

注意

运行 iOS 3.x 的 iPad 有一个 bug，它们只能检测到视频列表中的第一个文件。iOS 4（iPad 可以免费升级）已经修复了这个 bug。如果你需要向没有升级到 iOS4 的 iPad 用户分发视频，你需要将 MP4 文件放在第一位，然后才能是那些免费的视频格式。

MIME 类型的丑陋台头

视频有如此多神奇的问题，以至于我们在这里不得不再次提起。这是必须的，因为一个错误配置的 web 服务器可能导致无尽地消耗，让你在调试“为什么这个视频能在本地播放，却不能在网页上播放”这个问题时耗费大量时间。如果你出现了这个问题，其根本原因很可能是错误的 MIME 类型。

我们曾经在 HTML5 历史一章中提到过 MIME 类型。可能你已经把它忘记了。下面就是我们的忠告：

视频文件必须指定正确的 MIME 类型！

什么是正确的 MIME 类型？你已经看到了，它实际是 <source> 元素的 type 属性的一部分。但是仅仅在 HTML 标记中设置 type 属性是不够的。你还得保证 web 服务器在 HTTP 头的 Content-Type 中包含正确的 MIME 类型。

如果你用的是 Apache web 服务器，或者是 Apache 的衍生产品，你可以在半点的 httpd.conf 文件中使用 AddType 声明，或者修改在你放置视频文件的目录中的 .htaccess 文件。（如果你使用别的 web 服务器，请查阅服务器文档，了解如何设置特定的 HTTP 头的 Content-Type。）

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

第一行是增加 Ogg 容器；第二行增加 MPEG-4 容器；第三行增加 WebM 容器。我们仅需要设置一次。如果你忘记设置，在某些浏览器中，你的视频可能会播放失败，即使你在 HTML 标记的 type 属性中指定了 MIME 类型。

如果要了解更多关于配置服务器的细节信息，我建议阅读 Mozilla Developer Center 的这篇文章： Configuring servers for Ogg media （这里说的技巧同样适用于 MP4 和 WebM）。