2012-02-26 7 views
8

Me gustaría obtener el respaldo de Flash para que mediaelement.js funcione, pero solo muestra un área negra que dice "descargar archivo" en la esquina superior izquierda. El marcado de video que genero se parece mucho a esto. Acabo de modificar algunos caminos por razones de privacidad:Flash en mediaelement.js solo muestra "archivo de descarga"

<video width="1024" height="576" preload="none" style="display: none; "> 
    <object width="1024" height="576" type="application/x-shockwave-flash" data="flashmediaelement.swf"> 
    <param name="movie" value="/wp-content/themes/my_theme/js/vendor/mediaelement/flashmediaelement.swf"> 
    <param name="flashvars" value="controls=true&amp;file=http://mybucket.s3.amazonaws.com/my_video.mp4"> 
    </object> 
</video> 

¿Hay algo obviamente malo en esto? ¿Hay alguna forma de obtener algún resultado de depuración? ¿Cuándo aparece el elemento "descargar archivo"? La página mediaelement.js no lo menciona en ninguna parte. Al principio pensé que una de las rutas debe ser incorrecta, pero no puedo ver ninguna solicitud fallida en las herramientas de depuración de Chrome.

¡Se agradece cualquier ayuda!

EDIT: extraje un ejemplo mínima del código de no haber subido y que here

Respuesta

11

1) No ha especificado <source/> el interior de vídeo - es por eso que no funciona. Debe especificar múltiples <source/> para que funcione en diferentes navegadores; consulte "Opción B" en http://mediaelementjs.com/.

El enlace "Descargar archivo" es efectivamente generado por la lógica MediaElement (ver mediaelement-and-player.js:1027).

2) La recuperación de flash solo se invocará si el navegador no admite la etiqueta <video>. Para probarlo en un navegador que sí lo haga, reemplace "<video>" con una etiqueta no válida, por ejemplo, "<voodeo>".

Aquí está el código fijo (reemplazado algunos caminos para poder probarlo):

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajmurmann.com/flash_test/mediaelement-and-player.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){   
      $('video').mediaelementplayer({ 
      enablePluginDebug: true, 
      plugins: ['flash','silverlight'] 
     }); 
      }); 
     </script> 
    </head> 
    <body> 
     <video width="1024" height="576" controls="controls"> 
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
      <source type="video/mp4" src="http://mediaelementjs.com/media/echo-hereweare.mp4" /> 
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
      <source type="video/webm" src="http://mediaelementjs.com/media/echo-hereweare.webm" /> 
      <!-- Ogg/Vorbis for older Firefox and Opera versions --> 
      <source type="video/ogg" src="http://mediaelementjs.com/media/echo-hereweare.ogv" /> 
      <object width="1024" height="576" type="application/x-shockwave-flash" data="http://ajmurmann.com/flash_test/flashmediaelement.swf"> 
       <param name="movie" value="http://ajmurmann.com/flash_test/flashmediaelement.swf"> 
       <param name="flashvars" value="controls=true&amp;file=http://ajmurmann.com/flash_test/echo-hereweare.mp4"> 
      </object> 
     </video> 
    </body> 
</html> 
+0

¿Sabe por qué la ruta del archivo debe ser dos veces? Una vez en la fuente y una vez en los flashvars? – ajmurmann

+0

¡SÍ! Me preguntaba esto también. El hecho es que IE usa uno de ellos mientras que FF el otro. –

1

Como ivan_pozdeev indicó, es necesario especificar una etiqueta src en el elemento de vídeo. Sin embargo, no es necesario que proporciones varias fuentes para que MediaElement.js funcione en diferentes navegadores.

En su caso, puede proporcionar un único archivo .mp4 y funcionará en todos los navegadores (consulte el Paso 2: Opción A en http://www.mediaelementjs.com) siempre que tenga Flash o Silverlight instalados (es decir, la funcionalidad "A futuro" de ME))

"Descargar archivo" aparecerá cuando HTML5 no sea original del navegador que está utilizando Y no tenga instalado el plugin respectivo (es decir, Flash o Silverlight). En mediaelement-and-player.js, corte en la línea 162 (var pv = this.plugins [plugin];) - si "pv" tiene un valor de "0, 0, 0", MediaElement no ha detectado un complemento y usted recibirá el enlace "Descargar archivo".

0

Si está intentando hacer un video de youtube y está mostrando esto, lo que sucedió fue que olvidé poner type = "video/youtube" en la etiqueta de origen. Se acaba de configurar type = 'video'

Cuestiones relacionadas