HTML5视频及其兼容实践

之前实践过一些关于HTML5视频的解决方案，分享一下使用过程和思路。

我们都知道HTML5 video标签是现在比较流行的播放器，几乎很多高级的浏览器如chrome、firefox和Safari都支持video标签，但是仍然有一部分老的浏览器不支持，特别是IE9以下的浏览器，这样子你需要提供一个兼容性的方案，例如flash播放器来解决这个问题了。

由于IOSshebei无法播放flash视频，并且这是一个无法改变的结果，你需要使用HTML5 video技术。之前写过一篇文章关于视频响应式代码，通过video标签可以实现在移动设备上自适应兼容。

HTML5一些解决方案

• YouTube
• Vimeo
• VideoJS
• MediaElementJS
• JW Player
• Sublime
• Wistia
• Video For EveryBody

最容易的解决方案当然是把视频上传到视频服务商那里，直接调用视频代码，上面的解决方案是来自国外，我们可以把视频上传到优酷、土豆或者爱奇艺等国内著名视频服务商。

现代的HTML5视频格式

支持HTML5视频播放的浏览器支持3种视频格式 MP4, OGG 和 WebM,但并非所有的浏览器都支持3种。

MP4

• Safari 3+
• Internet Explorer 9+
• Chrome (wasn’t meant to be but it certainly is!)

OGG

• Firefox 3.5+
• Chrome 3+
• Opera 10.5+

WebM

• Firefox 4+
• Chrome 6+
• Opera 10.6+

所以问题来了，你无法做到只用其中一种格式就能解决HTML5视频播放，MP4是比较全面，但它在firefox和Safari中并不是很友好，而OGG和WebM则支持Firefox、chrome和Safari，但同样的这些浏览器有一些旧版本也是不支持这两种格式的。

最常用的HTML5视频代码是这样子的：

<video width="480" height="300" controls="controls" preload="auto" poster="path-to-poster.jpg"><source src="path-to-mp4.mp4" type="video/mp4" /><source src="path-to-webm.webm" type="video/webm" /><source src="path-to-ogv.ogv" type="video/ogg" /></video>

虽然HTML5 video很好，但它并不支持一些旧的浏览器，这就需要flash了，下面来看看如何创建flash视频代码

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody --><video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" /><img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" alt="HTML5视频及其兼容实践" width="640" height="360" title="No video playback capabilities, please download the video below" /></object></video><p><strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a></p>

最后，我们还可以使用插件，只要输入视频的地址就行了，最近在用的一个播放器插件叫ckplayer.有空写一下这个插件的一些使用和它的自适应方面的东西。

运维的同学说Flash播放放在本地，要走rtmp协议，而mac则走的是m3u8协议，这样子才不会被别人下载拖慢带宽，同时实现播到哪里加载到哪里，不播放则不加载，不影响网络带宽。而本人则发现以下无法解决的难题：

chrome不支持m3u8, mac不支持flash，而flash是使用rtmp协议，而html5不支持rtmp协议，所以mac下chrome不支持播放视频。请更换为Safari浏览器。若需要支持mac chrome播放视频，需要使用http协议。而http协议又会一直下载，影响流量带宽，不采取。

你能够解决上面这道难题吗？来说说你的看法吧。

参考资料：

video for everybody ：http://v4e.thewikies.com/

http://coolestguidesontheplanet.com/use-html-5-video-on-all-browsers/

http://www.dev-metal.com/mini2-extremely-simple-barebone-php-application-top-slim/