MediaElement.js 不在 IE8 中加载媒体

Question

我正在制作一个网络应用程序，它使用MediaElement.js (ME.js) 在不同的浏览器中播放音频和显示视频。但是，我在使用 IE8 时遇到了问题：当我使用 DOM 中的 <audio>element 实例化 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>

注意有一点不同：在第一个 sn-p 中它显示为 <PARAM NAME="Play" VALUE="-1">，而在第二个中它显示为 <PARAM NAME="Play" VALUE="0">。这似乎很重要，但我不知道如何解释它。请注意，这不是 ME.js 生成的标记，而是在加载 .swf 文件时以某种方式生成的标记。我不是任何一种闪存专家，我无法真正解释如何。

当我使用Fiddler 监控加载了哪些资产时，两个页面之间的区别在于，第一页加载 .swf 文件作为最后一件事，第二个页面加载 .swf 文件，然后加载 .mp3 .

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

Answer 1

事实证明，如果 Flash 对象位于具有visibility:hidden 的元素内，则它不会加载其媒体文件。仅在 IE 中。