Flash基础入门之html5结合flash实现视频文件在所有主流浏览器兼容播放
小标 2018-10-29 来源 : 阅读 1264 评论 0

摘要:本文主要向大家介绍了Flash基础入门之html5结合flash实现视频文件在所有主流浏览器兼容播放,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。

本文主要向大家介绍了Flash基础入门之html5结合flash实现视频文件在所有主流浏览器兼容播放,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。

由于html5的出现,让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持,并且各浏览器对于视频编码格式的支持不一致,这就需要我们考虑一个综合的实现方案,使得视频在不同浏览器中都能顺利播放,而且在老版本的浏览器中也能得到支持。以下是结合项目经验,总结出的几种方案,与大家分享。方案1、使用VideoJS插件实现兼容 插件下载//videojs.com使用新版VideoJS插件需要注意的是其使用方法:
使用步骤一:head部分添加
说明:上述javascript代码进适用于支持html5元素的IE版本,对于老版本的IE可以通过HTML5shiv来使不支持HTML5的浏览器支持HTML新标签。htnl5shiv主要解决HTML5提出的新的元素不被IE6/IE7/IE8识别,这些新元素不能作为父节点包裹子元素,且不能应用CSS样式。让CSS 样式应用在未知元素只需执行 document.createElement(elementName) 即可实现。html5shiv的工作原理也就是基于此。html5shiv的使用很简单,由于IE9是支持html5的,故只需要在head中添加如下代码即可:
使用步骤二:body显示视频部分添加
说明:这里的webm格式是针对FF浏览器的播放格式。
 
目前VideoJS最新升级的版本v3.2.0,本人已测试的V3.0以上都不支持IE6/IE7/IE8/,因此我们这里采用老版本v2.0.2实现。例如文章《VideoJs Version 3 doesn‘t work on IE7 / IE8》 的相关说明请查看帮助文档//help.videojs.com/使用方法是:步骤一:在页面head部分添加如下代码:


步骤二:在body显示视频位置添加如下代码:

video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster="//www.feiliu.com/zt/img/20120417/img01.jpg"> 
说明:这段视频代码外层以一个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传统标签的代码:


说明:这里使用的优酷的视频迷你播放器,减小了播放控制条的显示大小,比优酷普通播放器的画面大一些,用户体验好一些。
页面二针对mac设备代码:

  

说明:mac设备的Safari浏览器支持mp4格式,如果视频文件放在自己服务器,使用上述mp4格式的视频链接即可;也可以使用优酷的链接,优酷提供自动转码到iOS支持格式这一机制。例如优酷视频地址为//player.youku.com/player.php/sid/XMzkwNzY2NTEy/v.swf,其iOS设备格式地址只需要改为//v.youku.com/player/getRealM3U8/vid/XMzkwNzY2NTEy/type//video.m3u8 。
 
相关文章请考考《分析优酷HTML5地址》地址//blog.xiaohai.co/archives/youku-html5/
统一采用优酷地址的好处是保证了两个页面的一致性,又减轻自己服务器压力,而且可以与优酷合作更好的营销。
页面访问的设备检测代码如下:

补充:安卓系统从Android 2.1版本就开始部分支持flash,可下载安装flash插件播放视频。Adobe Flash Player 10.1.92.8已经支持所有android 2.2智能手机。目前主流的安卓智能机系统都在版本2.3以上,android4.0已大行其道。因此无须对安卓设备采用单独的视频处理方案,安卓系统和windows系统采用同样的方案,使用flash播放器即可实现。
 
 
html5media是一个让video、audio标签在旧版IE中全面兼容的JavaScript类库,它不依赖于任何JavaScript框架。页面使用了html5media之后,当老版本的浏览器不支持HTML5时,它将会自动切换成Flash模式的flowplayer播放器尝试播放。。使用html5media的方法:1、首先在页面head部分加入如下脚本你可以通过使用IE条件注释的方法,只在旧版IE浏览器中加载这条JS脚本。2、然后在body部分使用audio或video标签,添加音频视频相关代码。

这样你便可以在IE6-IE8浏览器中使用audio和video标签了。 

以上就介绍了Flash的相关知识,希望对Flash有兴趣的朋友有所帮助。了解更多内容,请关注职坐标常用软件Flash频道!

                      

本文由 @小标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程