猿对象
技术博客

如何替代即将淘汰的Flash方案?

天天领购物红包,每天10点和15点更新购物红包!公众号搜索:小猿优品 查看二维码

Web技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问题:老技术如何迁移。正如本文的主题一样,Flash技术在早年风靡在Web领域,曾经发挥着无尽力量的一个工具正逐渐失去了其重要性。由于性能,兼容性,版权问题,Flash的市场正在消退,曾经靠Flash实现的功能和特性如何完美得进行迁移呢,本文将简单谈一谈Flash的几个常见的特性的替代方案。

1.视频播放(Play Video)
我们知道Flash可以播放.swf文件的动画视频,而且具有很强的控制功能,以前很多Web视频播放器都是基于Flash去实现的。包括embed标签,都是如此。所有视频源为swf的文件的视频都需要借助Flash去播放。

解决方案:
在移动端设备上,使用HTML5的video标签基本没有问题。 在PC上,IE低版本(IE8-)浏览器上除了Flash目前没有其它办法 在PC上,IE9+和其它现在浏览器,采用HTML5标签。 综合来说,可以统一用以下一段代码实现兼容:

<video width=”400″ height=”300″ controld>
<!– mp4格式适用于IE9+,Chrome,Safari –>
<source src=”test.mp4″ type=”video/mp4″></source>
<!– ogg格式适用于FireFox,Opera,Chrome –>
<source src=”test.ogg” type=”video/ogg”></source>
<!– webm格式适用于FireFox,Opera,Chrome –>
<source src=”test.webm” type=”video/webm”></source>
<!– object需要Flash支持,当IE8-时考虑 –>
<object data=”test.mp4″ width=”400″ height=”300″>
<!– embed需要Flash支持,当IE8-时考虑 –>
<embed src=”test.swf” width=”400″ height=”300″>
</object>
</video>

2.跨域请求(Corss Origin Request)

2.1使用Flash进行跨域请求的方案实现

目前在PC端a.qq.com的页面请求b.qq.com的一个接口是理论上跨域的一个请求,旧版本浏览器特别是只支持XMLHTTPRequest Level1的浏览器,需要访问跨域请求,要么使用jsonp,要么只能使用Flash。 使用Flash进行跨域需要做的事情是

1.a.qq.com的js与Flash交互 2.Flash校验安全性,检查b.qq.com下根目录的crossDomain.xml文件的控制访问属性 3.Flash作为中间代理请求b.qq.com 4.Flash将请求结果返回给a.qq.com的js 图1简明扼要的描述了这个过程。

总结 本文给出了笔者在实际工作中遇到的最常见的去Flash改造的三种场景,现以表格的形式简单概括如下:

现代H5 早期低版本IE等
视频播放 使用H5的video标签 没办法只能使用FLash,如果不用Flash,建议提醒用户升级浏览器
跨域提交请求 使用CORS,前后端结合 中转代理(PostMessage或者降域)
Ajax文件上传 使用FileReader+FormData封装 模拟表单提交到iframe

去Flash不仅是对实现方案的一种兼容改造,更是对早已成熟的新技术新思路的运用。目前而言,不管是因为政策原因,还是因为性能或者其它兼容性原因,去Flash改造都是重要和紧迫的,本文是笔者在实际工作过程中总结出的最常见的三种去Flash场景和改造方案,供参考,不足之处还请不吝指正。

文章类别:网络知识

如有转载,请注明本文链接: https://www.apedear.com/4255.html

赞(9) 打赏
推荐转载但是加个友情链接噢o(* ̄︶ ̄*)o:猿对象_网站运营SEO个人技术博客 » 如何替代即将淘汰的Flash方案?
分享到: 更多 (0)
标签:
点击领取👉淘宝拼多多京东优惠卷
点击领取👉淘宝拼多多京东优惠卷

评论 抢沙发

智奇网络个人工作室,放心,省心!

淘宝店铺智奇网络

觉得文章有用就打赏一下小编O(∩_∩)O~

支付宝扫一扫打赏

微信扫一扫打赏