视屏播放器中的iframe&object

文章目录

1. 1. 背景
2. 2. iframe与object参数
3. 3. 兼容性
   1. 3.1. 浏览器之间的兼容
   2. 3.2. 视频平台的兼容

背景

这里的背景是实现腾讯视频与爱奇艺视频的一个视频切换功能，爱奇艺那边提供的是使用object标签实现视频的播放效果，一开始想和腾讯视频一样使用iframe标签，但是发现iframe在爱奇艺上面不能全屏，无奈之下，只好用回object。

iframe与object参数

iframe标签：

'<iframe id="videof" frameborder="0" width="100%"  height="'+(videoHeight)+'" src="'+src+'" allowfullscreen="true"></iframe>'

object标签：

 '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="100%" height="'+(videoHeight)+'" align="middle">'
+'<param name="allowscriptaccess" value="always">'
+'<param name="quality" value="high">'
+'<param name="autoStart" value="0" />'
+'<param name="wmode" value="opaque">'
+'<param name="allowfullscreen" value="true">'
+'<param name="bgcolor" value="#000000">'
+'<param name="movie" value="'+src2+'">'
+'<param name="flashvars" value="vid='+ params0[3] +';tvid='+ params0[2] +'&amp;autoPlay=1&amp;autoChainPlay=1&amp;showSearch=0&amp;showSearchBox=0&amp;autoHideControl=1&amp;showFocus=0&amp;showShare=0&amp;showLogo=0&amp;coop=coop_227_qsbk&amp;cid=qc_100001_300089&amp;bd=1&amp;showDock=0">'
+'<embed width="100%" height="'+(videoHeight)+'" allowscriptaccess="always" wmode="opaque" allowfullscreen="true" bgcolor="#000000" align="middle" flashvars="vid='+ params0[3] +'&amp;tvid='+ params0[2] +'&amp;autoPlay=1&amp;autoChainPlay=1&amp;showSearch=0&amp;showSearchBox=0&amp;autoHideControl=1&amp;showFocus=0&amp;showShare=0&amp;showLogo=0&amp;coop=coop_227_qsbk&amp;cid=qc_100001_300089&amp;bd=1&amp;showDock=0" src="'+src2+'" name="mvFlash" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">'
+'</object>'

具体的参数我就不多说了，网上也有很多资源，我主要想讲一下浏览器对他们的兼容性。

兼容性

浏览器之间的兼容

首先IE只支持对Object的解析。
火狐，谷歌，Safari只支持对Embed的解析。
上面的例子中同时使用 object 和 embed 标签来嵌入，细心的人会发现，object 的很多参数和 embed 里面的很多属性是重复的，为什么这样做？为了浏览器兼容性，有的浏览器支持 object，有的支持 embed，这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法，最大限度的保证了 Flash 的功能，没有兼容性问题。

视频平台的兼容

兼容性	web	touch端	ipad
腾讯视频	iframe	iframe	iframe
爱奇艺	object	iframe	iframe(不能全屏)

因为在ipad中仍然用的是web中样式，但是ipad中是没有flash插件的，所以不能用object，只能用iframe标签，但是也可以尝试去用新出的video标签来实现。