首页 HTML5 Dive Into HTML5:检测 HTML5 特性(续)

Dive Into HTML5:检测 HTML5 特性(续)

0 0

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
    }
}

发表评论

关于我

devbean

devbean

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

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