首页 HTML5 Dive Into HTML5:Web 视频(续三)

Dive Into HTML5:Web 视频(续三)

0 1.5K

标签使用

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

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

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

从技术上说,这已经足够了。但是就像<img>标签,你还应该在<video>标签中添加widthheight属性。widthheight属性可以同你在编码视频时指定的最大宽度和高度的值一致。不要担心小于这个值,浏览器会自动将视频居中显示在<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>

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

下面就是让页面加载完成之后马上下载视频的例子(只是下载,并不播放):

<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 技巧去这么做。(例如,在windowload事件中调用视频的play()函数。)这会让访问者很难取消。而提供一种标准做法,就可以很方便地给浏览器安装一个扩展,“我不喜欢自动播放视频,让浏览器忽略autoplay属性”。

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

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

在 Firefox 上有一个 Greasemonkey 脚本,安装之后就可以禁止 HTML5 视频的自动播放。它使用 HTML5 的autoplayDOM 属性,这个属性同 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)。

发表评论

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2