MediaElement.js不会在IE8中加载媒体

时间:2011-12-07 09:39:56

标签: flash internet-explorer-8 mediaelement.js

我正在制作一个使用MediaElement.js(ME.js)播放音频和在不同浏览器中显示视频的网络应用。但是,我在使用IE8时出现问题:当我使用DOM中的<audio>元素实例化MediaElement时,flash对象会被创建并插入DOM中,但媒体不会被加载。没有报告错误。相反,没有任何事情发生。

尝试调试它,我创建了一个小测试页面,它也使用ME.js尝试播放相同的音频文件。奇怪的是,这个页面工作正常。 IE8加载并播放该文件。我试着看看这两个页面在DOM中输出的内容,看看我是否可以得到一个关于出错的提示。

这是来自网络应用:

<OBJECT id=me_flash_0 codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=1 height=1><PARAM NAME="_cx" VALUE="26"><PARAM NAME="_cy" VALUE="26"><PARAM NAME="FlashVars" VALUE="id=me_flash_0&amp;isvideo=false&amp;autoplay=false&amp;preload=auto&amp;width=1&amp;startvolume=0.8&amp;timerrate=250&amp;height=1&amp;file=http%3A%2F%2Fgsv%2Felearning%2Fapp%2F_dev%2Ftest1.mp3"><PARAM NAME="Movie" VALUE="plugins/flashmediaelement.swf?x=Tue Dec 6 16:06:01 UTC+0100 2011"><PARAM NAME="Src" VALUE="plugins/flashmediaelement.swf?x=Tue Dec 6 16:06:01 UTC+0100 2011"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="000000"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="true"></OBJECT>

...这是来自测试页面:

<OBJECT id=me_flash_0 codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=1 height=1><PARAM NAME="_cx" VALUE="26"><PARAM NAME="_cy" VALUE="26"><PARAM NAME="FlashVars" VALUE="id=me_flash_0&amp;isvideo=false&amp;autoplay=false&amp;preload=auto&amp;width=1&amp;startvolume=0.8&amp;timerrate=250&amp;height=1&amp;file=http%3A%2F%2Fgsv%2Felearning%2Fapp%2F_dev%2Ftest1.mp3"><PARAM NAME="Movie" VALUE="plugins/flashmediaelement.swf?x=Tue Dec 6 16:08:13 UTC+0100 2011"><PARAM NAME="Src" VALUE="plugins/flashmediaelement.swf?x=Tue Dec 6 16:08:13 UTC+0100 2011"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE="LT"><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="NoScale"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="000000"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="true"></OBJECT>

请注意,区别在于:在第一个代码段中显示<PARAM NAME="Play" VALUE="-1">,在第二个代码段中显示<PARAM NAME="Play" VALUE="0">。这看起来很重要,但我不知道如何解释它。请注意,这不是ME.js生成的标记,而是在.swf文件加载时以某种方式生成的标记。不是任何一种闪存专家,我无法解释如何。

当我使用Fiddler监视哪些资产被加载时,两个页面之间的区别在于第一页加载.swf文件作为最后一页,第二页加载.swf文件然后加载.MP3。

我应该提一下,当我强制它使用Flash插件而不是原生HTML元素时,网页应用可以在Chrome中运行。

1 个答案:

答案 0 :(得分:6)

事实证明,如果flash对象位于具有visibility:hidden的元素内,则不会加载其媒体文件。仅限IE浏览器。