浅谈基于HTML5的在线视频播放方案

如今在这个特殊的时代下：flash将死未死，微软和ie的历史问题，html5标准未定，苹果和谷歌的闭源和开源之争，移动互联网的大势所趋，浏览器各自为战…这些都导致web开发者在设计视频解决方案的时候相当困惑。本文围绕这个主题，来探讨一下相关的技术，原理和工具。

编码与格式的误区
很多人将编码和格式误认为是同一个东西，往往以视频文件的后缀来唯一确定视频文件的支持程度。而事实上，用一句话来概括就是：视频的文件后缀（假设没有恶意修改后缀）实际上代表一种封装格式，而视频或者音频的编码算法与封装格式本身无直接的关系：同样的封装格式（即同样的后缀）可以封装不同编码算法的视频和音频。而视频播放设备或软件是否支持视频的播放，不仅仅要看封装格式，还要看编码算法。认清这一点是理解和排查问题的基础。

封装格式规定了视频的所有内容，包括图像，声音，字幕，系统控制等，其中以图像和声音最为关键。

从mpeg说起
mpeg是一个定义视频规格的国际组织，他们曾经推出的mpeg-1和mpeg-2实际上分别就是大家熟知的vcd和dvd，不过这都是远古的东西了。我们来看看跟本文主题有关的mpeg-4规范。

mpeg-4规范规定了文件后缀名为.mp4，目前包括三种图像编码和压缩算法：xvid\divx\avc(h.264)，其中xvid和divx也可以统称为mpeg-4 part 2或者mpeg-4 visual，而更为知名的h.264和avc是相同的概念。音频方面则是aac。以下关于兼容的内容，来源于*和格式工厂以及笔者的测试：

android浏览器：支持divx和avc，xvid应该不支持
iphone和ipad（ios）：支持divx和avc，xvid不支持
chrome：支持avc，不支持divx和xvid。谷歌曾在2011年初宣布由于许可问题，将移除chrome浏览器对avc(h.264)的支持。但是直到目前的版本，avc还在被支持。另外，实际测试下来，如果是divx和aac封装在mp4中的话，chrome可以播放，但是只有声音(aac)。
firefox和opera：还是由于许可的问题，firefox和opera逐渐动摇了对avc的支持，笔者在最新的firefox中测试avc仍然可以播放（*的解释是可能与系统本身具有解码器有关）；至于divx和xvid，笔者在firefox下的测试结果是不支持。从*的兼容列表看，opera对avc支持的不好。
ie：笔者的ie11能够支持avc，不支持divx和xvid
webm的倡导
由于avc(h.264)的授权问题，以chrome、firefox、opera为首的开源阵营开始动摇对avc的支持，尽管目前这些浏览器仍然能够支持avc，但是它们也倾向于一个叫做webm的开源多媒体项目，该项目包括一个叫vp8的新的开源视频编解码方案。目前vp8已经发展到了vp9。作为封装格式的webm具有.webm的后缀和video/webm的mime类型。在音频方面，可以使用vorbis/opus。从兼容性看，chrome、firefox、opera对vp8的兼容性相当理想，但是safari和ie几乎无法支持。

开源的ogg
ogg几乎与webm相同，开源，被广泛的在开源平台支持。其视频编码方案称为theora(有vp3发展而来，由xiph.org基金会开发，可被用于任何封装格式)，音频为vorbis。后缀通常为.ogv或.ogg，mime类型为video/ogg。在兼容性上，chrome、firefox、opera能够支持（但是opera在移动平台上无法支持），但是safari和ie几乎无法支持。

html5方案
以上的讨论实际上的大前提是：视频基于html5的<video>方案。现在我们来总结一下兼容性：

*ie9 “只有当用户安装了vp8的编解码器时”才能支持vp8。

†google chrome 2011年宣布 放弃h.264, 但是“还没兑现”。 可以看出现在主流的仍然是mp4(avc)，但是为了解决“开源阵营”对avc的摇摆不定，可以选择利用video的多源方案，在avc的基础上额外提供对webm或ogg的支持：

xml/html code复制内容到剪贴板

1. <video poster="movie.jpg" controls>  
2.   <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>  
3.   <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>  
4.   <source src="movie.mp4" type='video/mp4; codecs="avc1.4d401e, mp4a.40.2"'>  
5.   <p>this is fallback content</p>  
6. </video>  

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：

提供一个webm的视频版本（vp8+vorbis）
提供一个mp4的视频版本（h.264+aac(low complexity)）
提供ogg版本（theora+vorbis）
服务端推荐使用nginx，尽量注意mime类型的配置正确

旧版本的ie和flash
在html5流行之前，通用的视频播放解决方案是flash和flv（flash从9开始支持h.264的mp4）。但是随着ios设备的流行，flash已经不是万能药了，越来越多的视频网站提供多元的解决方案，而且偏向于html5：也就是说，通过检测agent是否支持html5来决定使用video还是flash。在面对ie8以下的浏览器时，flash几乎是唯一的选择(silverlight的接受度普遍不高)。

当然针对flash和flv的方案，也有多种实现方法，笔者能够想到的有如下两种：

服务端根据agent的类型，输出不同的html，如果支持html5就输出video+mp4(avc)和webm（或者ogg），否则输出flash相关的标签或脚本
使用html5shiv和html5-video是ie也能够支持video标签，并且使用flash播放器来代替原生的video播放。
将object内嵌在video中：

xml/html code复制内容到剪贴板

1. <video id="movie" width="320" height="240" preload controls>  
2.   <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />  
3.   <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />  
4.   <source src="pr6.mp4" />  
5.   <object width="320" height="240" type="application/x-shockwave-flash"  
6.     data="flowplayer-3.2.1.swf">  
7.     <param name="movie" value="flowplayer-3.2.1.swf" />  
8.     <param name="allowfullscreen" value="true" />  
9.     <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoplay':false, 'autobuffering':true}}" />  
10.     <p>download video as <a href="pr6.mp4">mp4</a>, <a href="pr6.webm">webm</a>, or <a href="pr6.ogv">ogg</a>.</p>  
11.   </object>  
12. </video>