MediaElement.jsはIE8にメディアをロードしません

Question

使用するWebアプリを作成しています MediaElement.js （me.js）さまざまなブラウザにわたってオーディオを再生し、ビデオを表示するため。しかし、私はIE8で問題を抱えています：メディアエレメントをでインスタンス化するとき <audio>DOMからの要素、フラッシュオブジェクトが作成され、DOMに挿入されますが、メディアはロードされません。エラーは報告されていません。代わりに何も起こりません。

デバッグしようとすると、同じオーディオファイルを再生しようとするME.jsも使用する小さなテストページを作成しました。奇妙なことに、このページは正常に機能します。 IE8はファイルをロードして再生します。私は、これらの両方のページがDOMに出力するものを見て、何がうまくいかないかについてのヒントを得ることができるかどうかを確認しようとしました。

これはWebアプリからのものです。

<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">そして2番目に言う <PARAM NAME="Play" VALUE="0">. 。これはどういうわけか重要なようですが、私はそれを解釈する方法がわかりません。これがme.jsによって生成されるマークアップではなく、.swfファイルがロードされたときに何らかの形で生成されるものであるということではありません。フラッシュの専門家ではないので、その方法を実際に説明することはできません。

使用するとき フィドラー どの資産がロードされるかを監視するために、2つのページの違いは、最初のページが最後のものとして.swfファイルをロードし、2番目のページが.swfファイルをロードしてから.mp3をロードすることです。

ネイティブHTML要素の代わりにフラッシュプラグインを使用するように強制するとき、WebアプリはChromeで機能することに言及する必要があります。

Answer 1

Flashオブジェクトは、メディアファイルが存在する要素内にある場合、メディアファイルをロードしないことがわかります。 visibility:hidden. 。しかし、IEでのみ。