admin管理员组文章数量:1660065
由于html5的出现,让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持,并且各浏览器对于视频编码格式的支持不一致,这就需要我们考虑一个综合的实现方案,使得视频在不同浏览器中都能顺利播放,而且在老版本的浏览器中也能得到支持。
以下是结合项目经验,总结出的几种方案,与大家分享。
方案1、使用VideoJS插件实现兼容
-
<!–[if lt IE 9]>
-
<script type="text/javascript" src="http://html5shiv.googlecode/svn/trunk/html5.js"></script>
-
<![endif]–>
http://videojs
使用新版VideoJS插件需要注意的是其使用方法:
使用步骤一:head部分添加(自己下载好)
<link href="http://vjs.zencdn/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn/c/video.js"></script>
说明:上述javascript代码进适用于支持html5元素的IE版本,对于老版本的IE可以通过HTML5shiv来使不支持HTML5的浏览器支持HTML新标签。htnl5shiv主要解决HTML5提出的新的元素不被IE6/IE7/IE8识别,这些新元素不能作为父节点包裹子元素,且不能应用CSS样式。让CSS 样式应用在未知元素只需执行 document.createElement(elementName) 即可实现。html5shiv的工作原理也就是基于此。html5shiv的使用很简单,由于IE9是支持html5的,故只需要在head中添加如下代码即可:
<!–[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode/svn/trunk/html5.js"></script>
<![endif]–>
在body显示视频位置添加如下代码:
<div class="vd">
<!-- Begin VideoJS -->
<div class="video-js-box">
<video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster="http://www.feiliu/zt/img/20120417/img01.jpg">
<source src="http://www.feiliu/zt/video/mv01.mp4" type='video/mp4;' />
<source src="http://www.feiliu/zt/video/test2.webm" type='video/webm'/>
<object id="flash_fallback_1" class="vjs-flash-fallback" width="280" height="210" type="application/x-shockwave-flash" data="http://www.feiliu/zt/flash/flowplayer-3.2.1.swf">
<param name="movie" value="http://www.feiliu/zt/flash/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://www.feiliu/zt/img/20120417/img01.jpg", {"url": "http://www.feiliu/zt/video/mv01.flv","autoPlay":false,"autoBuffering":true}]}' />
<img src="http://www.feiliu/zt/img/20120417/img01.jpg" width="280" height="210" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>
<!-- End VideoJS -->
</div>
说明:这段视频代码外层以一个class=“vd”的div分隔区别。这样,支持html5的浏览器,会逐个检测提供的视频编码格式,直到找到可以播放的格式为止,如果所有格式都不能播放,则尝试使用flowplayer这个flash播放器(支持上述mp4格式)对视频进行解码。对于不支持html5的浏览器,也使用flash播放。因此,使用该方案只需要提供一个mp4格式的视频即可实现在所有浏览器上播放,不过flash播放器对mp4格式的文件解码较慢,为了照顾用户体验,故而上述我们又增加了一种flv格式的选择。
这个方法有一缺点:算上页面上的其他js效果,由于使用了大量的js,视频检测机制占用了很大的系统资源,而且我的项目页面上有11个视频之多,造成了页面加载慢,降低了用户体验。出于此,第二套方案诞生。
方案2、由于目前大多数设备的浏览器对flash支持的很好,所以考虑页面一还是使用object/embed传统标签嵌入视频,用Adobe Flash Player播放。而对于不支持flash的苹果设备,制作另一个页面二。然后根据通过js程序对User-Agent的判断给不同的设备浏览器用户显示不同的页面,优酷网曾采用这种模式。
flash统一使用格式:
<div class="vd">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="280" height="210">
<param name="movie" value="http://static.youku/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param value="true" name="allowfullscreen" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="flashvars" value="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999"/>
<embed height="210" align="middle" width="280" pluginspage="http://www.macromedia/go/getflashplayer" type="application/x-shockwave-flash" name="aprilfools" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" src="http://static.youku/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" menu="true" play="true" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0"></embed>
</object>
</div>
这里使用的优酷的视频迷你播放器,减小了播放控制条的显示大小,比优酷普通播放器的画面大一些,用户体验好一些。
页面二针对mac设备代码:
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="280" height="210" poster="http://www.feiliu/zt/img/20120417/preview.jpg" data-setup="{}">
<source src="http://www.feiliu/zt/video/mv01.mp4" type='video/mp4'/>
</video>
统一采用优酷地址的好处是保证了两个页面的一致性,又减轻自己服务器压力,而且可以与优酷合作更好的营销。
页面访问的设备检测代码如下:
<script type="text/javascript">
if ((/iPhone|iPad|iPod/i).test(navigator.userAgent) || (/Mac68K|MacPPC|Macintosh|MacIntel/i).test(navigator.platform)){
window.location.href = "####page2.html"
}
</script>
补充:安卓系统从Android 2.1版本就开始部分支持flash,可下载安装flash插件播放视频。Adobe Flash Player 10.1.92.8已经支持所有android 2.2智能手机。目前主流的安卓智能机系统都在版本2.3以上,android4.0已大行其道。因此无须对安卓设备采用单独的视频处理方案,安卓系统和windows系统采用同样的方案,使用flash播放器即可实现。
版权声明:本文标题:html5兼容所以浏览器视频播放 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729838505a1214583.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论