MediaElemement.js no carga medios en IE8
https://stackoverflow.com/questions/8413158
-
29-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy haciendo una aplicación web que usa MediaElement.js (Me.js) para reproducir audio y mostrar video en diferentes navegadores. Sin embargo, estoy teniendo problemas con IE8: cuando instancio el medieve con un <audio>Elemento desde el DOM, el objeto flash se crea e inserta en DOM, pero luego los medios no se cargan. No se informan errores. En cambio no pasa nada.
Intentando depurarlo, he creado una pequeña página de prueba que también usa me.js que intenta reproducir el mismo archivo de audio. Curiosamente, esta página funciona bien. IE8 carga y reproduce el archivo. He tratado de ver lo que ambas páginas salen en el DOM para ver si podría obtener una pista sobre lo que está pasando mal.
Esto es de la aplicación 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&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>
... y esto es de la página de prueba:
<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>
Observe que hay una diferencia: en el primer fragmento dice <PARAM NAME="Play" VALUE="-1">Y en el segundo dice <PARAM NAME="Play" VALUE="0">. Esto parece significativo de alguna manera, pero no tengo idea de cómo interpretarlo. Por favor, no es que este no sea el marcado generado por mí.js, sino algo que de alguna manera se genera cuando el archivo .swf se ha cargado. Al no ser ningún tipo de experto en flash, realmente no puedo explicar cómo.
Cuando uso Violinista Para monitorear qué activos se cargan, la diferencia entre las dos páginas es que la primera página carga el archivo .swf como lo último y el segundo carga el archivo .swf y luego carga el .mp3.
Debo mencionar que la aplicación web funciona en Chrome cuando la obliga a usar el complemento Flash en lugar de los elementos HTML nativos.
Solución
Resulta que los objetos flash no cargarán su archivo multimedia si está dentro de un elemento que tiene visibility:hidden. Sin embargo, solo en IE.
