HTML5特性检测三：Video Format(视频格式)_H5之家 - 中国HTML5教程资源分享第一站

Video Formats(视频格式)

视频格式就好比书面语言。一份用英文描述和一份用西班牙文描述的具有相同内容的报纸，其实它们本质都是在描述同样的信息，但是对于只会英文的你而言，只有英文的那份对你才是真正有帮助的。同样的，对于一个视频而言，你的浏览器需要“读得懂”描述你视频的语言。

描述视频的语言被称为：”codec”——一种用来将视频编码成为字节流的算法。目前世界上有许许多多的编码算法，那么你应该使用哪一个？一个不幸的事实是：不是所有的浏览器都遵循一种视频编码算法，它们主要遵循两种编码算法，一种是Safari和iphone遵循的需要收费的，另外一种是Chromium和Mozilla Firefox支持的开源免费的。

要检测你的浏览器支持那种视频格式，可以使用之前介绍的检测方法中的第三种。如果你的浏览器支持HTML5的Video特性，那么你用来检测的时候创建的<video>元素会有一个叫canPlayType()的方法，这个方法可以告诉你你的浏览器支持哪种视频格式。

如果你不想自己亲手去写这个检测方法的话，你可以使用Modernizr来检测你的浏览器支持哪种HTML5的视频格式。

JavaScript Code复制内容到剪贴板

if(Modernizr.video){
//let's play some video! but what kind?
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
}
}

用来检测Macs和iphones支持的视频格式的方法是:

JavaScript Code复制内容到剪贴板

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特性开始。如果你的浏览器不支持HTML5 的video特性，那么它自然也肯定不支持什么所谓的视频格式了。

JavaScript Code复制内容到剪贴板

if(!supports_video()){ return false; }

“视频格式”：简简单单一句话，其实包含了很多的东西。从技术的形式来讲，你可以问：“浏览器是否可以播放基于“H.264”的视频和在MPEG-4容器上的AAC LC音频（我会在后面详细介绍视频的章节告诉你这是什么意思）。如果你想了解更多，你可以阅读视频编码概述这篇文章

JavaScript Code复制内容到剪贴板

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

canPlayType()方法不会返回boolean值（True或者False）。因为视频格式非常的复杂，所以这个方法的返回值有以下几种值：

1. “probably“如果你的浏览器确认可以支持你传入的视频格式

2. “maybe”如果你的浏览器或许可以支持你传入的视频格式

3. “”（空的字符串）如果你的浏览器确认不能支持你传入的视频格式

第二种检测Mozilla Firefox和其他一些开源浏览器支持的开源视频编码格式的方式其实和第一种类似，唯一的不同点是你传入的参数不同，从技术的角度来讲，你可以问你的浏览器是否支持在Ogg容器内的“Theora“视频格式和”Vorbis”音频格式。

JavaScript Code复制内容到剪贴板

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