HTML5 video视频兼容实践

文章目录

之前实践过一些关于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/

原创文章:HTML5 video视频兼容实践 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/html5-video.html)
评论已关闭。

“HTML5 video视频兼容实践”有1个评论

  1. Zhang-st1998

    您好,我先问一下如何给flash插件的添加控制面板呢??

    ¥ 打赏 赞(0)
    登录回复