之前实践过一些关于HTML5视频video的解决方案，分享一下使用过程和思路。
我们都知道HTML5 video标签是现在比较流行的播放器，几乎很多高级的浏览器如chrome、firefox和Safari都支持video标签，但是仍然有一部分老的浏览器不支持，特别是IE9以下的浏览器，这样子你需要提供一个兼容性的方案，例如flash播放器来解决这个问题了。
由于IOSshebei无法播放flash视频，并且这是一个无法改变的结果，你需要使用HTML5 video技术。之前写过一篇文章关于视频响应式代码，通过video标签可以实现在移动设备上自适应兼容。
HTML5一些解决方案
最容易的解决方案当然是把视频上传到视频服务商那里，直接调用视频代码，上面的解决方案是来自国外，我们可以把视频上传到优酷、土豆或者爱奇艺等国内著名视频服务商。
现代的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" 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/
