MediaElement.js 无法在 IE8 中加载媒体
我正在制作一个网络应用程序，它使用 MediaElement.js (ME.js) 在不同的浏览器上播放音频和显示视频。但是，我在使用 IE8 时遇到了问题：当我使用 DOM 中的 元素实例化 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&isvideo=false&autoplay=false&preload=auto&width=1&startvolume=0.8&timerrate=250&height=1&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&isvideo=false&autoplay=false&preload=auto&width=1&startvolume=0.8&timerrate=250&height=1&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>
注意有一个区别：在第一个代码段中，它显示 第二个显示 。这似乎很重要，但我不知道如何解释它。请注意，这不是 ME.js 生成的标记，而是加载 .swf 文件时以某种方式生成的标记。我不是闪存专家，我无法真正解释如何做到这一点。
当我使用 Fiddler 来监控加载了哪些资源时，两个页面之间的区别是第一页最后加载 .swf 文件，第二个加载 .swf 文件，然后加载 .mp3。
我应该提到的是，当我强制 Web 应用程序使用 Flash 插件而不是本机 HTML 元素时，它可以在 Chrome 中运行。
I am making a web app that uses MediaElement.js (ME.js) for playing audio and displaying video across different browsers. However, I am having trouble with IE8: When I instantiate the MediaElement with an <audio>element from the DOM, the flash object gets created and inserted in DOM but then the media does not get loaded. No errors are reported. Instead nothing happens.
Trying to debug it, I have created a small test page which also uses ME.js that tries to play the same audio file. Strangely, this page works fine. IE8 loads and plays the file. I have tried to look at what both of these pages output in the DOM to see if I could get a hint about what is going wrong.
This is from the web app:
<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&isvideo=false&autoplay=false&preload=auto&width=1&startvolume=0.8&timerrate=250&height=1&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>
… and this is from the test page:
<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&isvideo=false&autoplay=false&preload=auto&width=1&startvolume=0.8&timerrate=250&height=1&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>
Notice there's a difference: In the first snippet it says <PARAM NAME="Play" VALUE="-1">and in the second it says <PARAM NAME="Play" VALUE="0">. This seems significant somehow, but I have no idea how to interpret it. Please not that this is not the markup generate by ME.js but something that somehow gets generated when the .swf file has loaded. Not being any kind of a flash expert, I can't really explain how.
When I use Fiddler to monitor which assets get loaded, the difference between the two pages are that the first page loads the .swf file as the last thing and the second loads the .swf file and then loads the .mp3.
I should mention that the web app works in Chrome when I force it to use the flash plugin instead of native HTML elements.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
事实证明，如果 Flash 对象位于具有
visibility:hidden的元素内，则 Flash 对象不会加载其媒体文件。但仅在 IE 中。It turns out that the flash objects won't load its media file if it is inside an element that has
visibility:hidden. Only in IE though.