基于Web的视频播放技术方案及HTML5对视频格式的支持现况

1. 写在前面
很久没有关注HTML5的视频播放技术了，今天小袁发来了问题，顺便看了看，发现时代进步的速度真的很快：主流浏览器对HTML5视频播放的支持已经有了质的突破。

2. 从MP4与Ogg之争到MP4与WebM之争
2010年-2011年我们还在讨论HTML5视频格式支持主要是MP4与 Ogg之争，当时我们希望VP8格式（也就是WebM）也能加入进来。时过两年，现在ogg已经淡出了，WebM在Google的支持下雄起了。

3. 名词解释


MP4: 全称MPEG-4 Part 14，是一种使用MPEG-4的多媒体电脑文件格式，扩展名为.mp4，以存储数字音频及数字视频为主。 MP4至2013年仍是各大影音分享网站所使用主流，即使他们是在网站上多加一层Flash的影音拨放接口。因为MP4可以在每分钟约4MB的压缩缩率下提供接近DVD质量的影音效果。 使用H.264 解码。
Ogg: 是一个自由且开放标准的容器格式，由Xiph.Org 基金会所维护。Ogg格式并不受到软件专利的限制，并设计用于有效率地流媒体和处理高质量的数字多媒体。
WebM: 是一个由Google资助的专案，目標是构建一个开放的、免版权费用的视频文件格式。该视频文件格式应能提供高质量的视频压缩以配合HTML5使用。WebM项目是一个使用BSD许可证的开源项目。它采用了On2 Technologies开发的VP8视频编解码器和Xiph.Org基金会开发的Vorbis音频编解码器，使用的封装格式则以Matroska格式为基础。
FLV:是FLASH VIDEO的简称，FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。

4. 浏览器支持的变化
过去由于格式之争，各浏览器厂商加入了不同的阵营，一般仅支持1种格式，很少有支持多个格式的，比如Firefox是不支持MP4的，但是从Firefox22开始却支持了MP4，通观来看，除了Opera，所有新版本的浏览器都支持MP4了。
WebM的支持率也很不错，Friefox、Chrome、Opera、Android原生浏览器都支持，另外微软也宣布，只要在本地安装了VP8编解码器，Internet Explorer 9也能支援WebM文件格式。




浏览器支持格式状态：http://www.longtailvideo.com/html5/formats/

WebM的优势是开源（即免费）、文件小（同样的内容、效果回比MP4小一半以上），缺点在于不是所有的浏览器都支持，再就是播放的时候会有WebM的一个小logo。

5. 新的解决方案: MP4 + Flash播放MP4
格式：MP4
支持：所有浏览器
原理：检测浏览器是否支持播放mp4，不支持则采用Flash播放MP4文件，这样就可以解决IE低版本及Opera不支持的问题了。
结果：在Safari（iPad、Windows、Mac OS）、Chrome、IE9、Firefox22+中原生播放mp4，在Firefox21-、Opera、IE678中使用flash播放器播放mp4。
优点：一中格式全面兼容
缺点：mp4是专利格式，需考虑编码器授权
实施步骤：
1、在web server的mime配置中加入video/mp4
2、找一个可以播放MP4文件的Flash(.swf)播放器。如酷播网页视频播放器，http://www.cuplayer.com
3、写（或找）一个js控件来判断、匹配、播放等。如flowplayer，http://www.flowplayer.org