1.6K

video

HTML5 定义了用于在 web 页面嵌入视频的新的标签<video>。在 HTML5 之前，我们只能使用第三方插件来嵌入视频，比如 Apple QuickTime 或者 Adobe Flash。<video>被设计成不需要使用检测脚本就可以使用的形式。你可以指定多个视频文件。如果浏览器支持 HTML5 视频，那么它就会自动选择它所支持的格式。不支持 HTML5 视频的浏览器会自动忽略<video>标签，此时，你可以利用这种特性，来告诉浏览器，“如果你不支持 HTML5 视频，那么就选择一个第三方插件吧！”Kroc Camen 为此设计了一个名为 Video for Everybody! 的解决方案。当浏览器不支持 HTML5 视频时，则使用 QuickTime 或者 Flash。这个解决方案不需要额外增加 JavaScript 代码，并且能够工作在几乎所有的浏览器上，包括移动浏览器。

如果你希望对视频有一个完整的控制，比如播放、前进、后退等，而不仅仅是满足于将其放置在页面上，那么你就得借助于 JavaScript。我们可以使用前面说的 Modernizr 库来检测对视频的支持。当然，如同前面的章节一样，我们现在主要关注于如何手工编写检测代码。如果你的浏览器支持 HTML5 视频，那么，浏览器可以创建一个用于表示<video>标签的 DOM 对象，并且这个对象会有一个canPlayType()方法；如果浏览器不支持，则仅仅会创建一个普通的对象，没有任何特殊的属性。因此，按照第二种检测技术，我们可以使用如下的代码：

function supports_video() {
    return !!document.createElement('video').canPlayType;
}

如果不愿意自己写代码，那么就是用 Modernizr 库进行检测吧！

if (Modernizr.video) {
    // let's play some video!
} else {
    // no native video support available 🙁
    // maybe check for QuickTime or Flash instead
}

在后面的有关视频的章节中，我们将看到另外一种将<video> 标签转换成基于 Flash 的视频播放的技术，用于在不支持 HTML5 视频技术的浏览器上面播放。

接下来，我们将介绍如何检测浏览器所支持的视频文件格式。

视频格式

视频格式类似于书写语言。虽然英语报纸可以翻译成西班牙语报纸，但是如果你只能看懂英语，那么只有其中一种对你而言是有用的。相对视频播放，浏览器也只能理解其中一些“视频语言”，也就是视频格式。

视频的“语言”称为“编码”。这是将视频翻译成位流的一种算法。现在有很多种编码方式，那么我们要使用哪一种呢？不幸的是，HTML5 不能仅仅支持一种编码方式。但是幸好它支持的也不算很多，也就是两个吧！其中一种是收费的（因为它使用商业协议），可以运行在 Safari 和 iPhone 平台（如果你使用 Video for Everybody! 的话，这种编码方式也可以运行在 Flash 上）。另外一种则是免费的，可以运行在开源浏览器上，例如 Chromium 和 Mozilla Firefox。

我们使用第三种检测技术来检测浏览器支持的视频格式。如果浏览器支持 HTML5 视频，就可以创建一个代表<video>的 DOM 对象，并且包含一个canPlayType()方法。这个方法可以告诉你浏览器究竟支持哪些视频格式。

下面的函数可以检测 Mac 和 iPhone 所支持的视频格式：

function supports_h264_baseline_video() {
    if (!supports_video()) {
        return false;
    }
    var v = document.createElement("video");
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

在这段代码中，我们首先使用supports_video()检测是否支持视频。如果连视频都不支持，那么就不用说支持的视频格式了！然后，我们创建了一个<video>临时元素（这个元素没有被添加到页面上，因而也就不可见），调用其canPlayType()方法。我们可以保证这个函数是可以调用的，因为我们已经事先通过了supports_video()的检测。

“视频格式”是完全不同的东西的组合。从技术上来说，你需要问浏览器的 MPEG-4 容器是不是支持 H.264 Baseline 视频和 AAC LC 音频（我们会在后面的章节中详细讲述这个问题，这里先直接无视吧）。我们使用的下面的语句：

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

canPlayType() 的返回值不是 true 或者 false。为标识复杂的视频格式，这个函数返回一个字符串：

• "probably"：浏览器能够支持该格式视频；
• "maybe"：浏览器可能能播放该格式视频；
• ""（空字符串）：浏览器不能播放该格式视频。

第二个函数用于检测 Mozilla Firefox 和其他开源浏览器支持的视频格式。整个过程是一样的，唯一的不同在于canPlayType()的参数。用技术术语来说就是，看看浏览器的 Ogg 容器是否支持 Theora 视频和 Vorbis 音频。

function supports_ogg_theora_video() {
    if (!supports_video()) {
        return false;
    }
    var v = document.createElement("video");
    return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

最后还有一种开源视频编码格式 WebM，这种格式将会被引入 Chrome、Firefox 和 Opera 的下一个主版本中。我们也可以使用相同的技术来检测 WebM：

function supports_webm_video() {
    if (!supports_video()) {
        return false;
    }
    var v = document.createElement("video");
    return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

同样，如果你不愿意自己编写代码，也可以使用 Modernizr 来检测：

if (Modernizr.video) {
    // let's play some video! but what kind?
    if (Modernizr.video.webm) {
        // try WebM
    } else if (Modernizr.video.ogg) {
        // try Ogg Theora + Vorbis in an Ogg container
    } else if (Modernizr.video.h264){
        // try H.264 video + AAC audio in an MP4 container
    }
}