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场景和改造方案,供参考,不足之处还请不吝指正。