今日有部分用户反馈firefox无法播放视频,我看了一下,确实在firefox中播放器无法正常载入,但Chrome正常,排除播放器本身的问题,应该是嵌入播放器的HTML代码可能有些问题。
看一下这个代码
<object id="FPlayer" type="application/x-shockwave-flash" width="100%" height="100%" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="movie" value="//swf.ws.126.net/openplayer/v01/-0-2_MBOR278SK_MBP8E2U4J-vimg1_ws_126_net//image/snapshot_movie/2016/6/I/G/MBPAB1TIG-1423031805654.swf?isTEDPlay=1" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="//swf.ws.126.net/openplayer/v01/-0-2_MBOR278SK_MBP8E2U4J-vimg1_ws_126_net//image/snapshot_movie/2016/6/I/G/MBPAB1TIG-1423031805654.swf?isTEDPlay=1" id="FPlayer" quality="high" width="100%" height="100%" name="FPlayer" align="middle" allowscriptaccess="always" allowfullscreen="allowfullscreen" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" /> </object>
摘自公开课一视频播放页播放器HTML代码
一瞟没啥问题,很经典的全兼容代码with w3c validate,但就是没有办法正常播放,因此决定使用排除法,排除了大部分内容之后,依旧无法正常播放,由于属性太多,决定改用增加变量的方式检测;首先找到一个可以正常播放的全兼容代码:
<object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="src" value="clock.swf" /> <param name="quality" value="high" /> <embed src="clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </object>
基于此进行多次修改,验证出是object的type=”application/x-shockwave-flash”会影响firefox正常解析embed标签,看了一下object与embed元素的差异(链接:http://w3help.org/zh-cn/causes/HO8001)发现,实际上embed与object单独均可以达到全浏览器兼容的效果,而差异仅仅是是否支持w3c校验,因此flash代码嵌入其实可以不用这么复杂。但这只算解决了问题,并不清楚为什么触发了此类bug,继续查找原因,找到object标签的定义(链接:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object),发现如下内容:
The content type of the resource specified by data. At least one of data and type must be defined.
data与type至少需要被定义,但定义了type没有定义data可能会导致浏览器尝试载入一个空资源,而出现问题,由于没有看firefox的具体实现逻辑,可能不是太准确,感兴趣的同学可以尝试看一下实现,但在使用flash播放器的时候尽量单独全兼容的代码,以避免此类问题发生。
hi,同北科校友。最近怎么样啊?邮件微信尬聊啊~
wechat:lidouhan