Fancybox popup + JSVideo HTML5 Video - ¿Por qué pierdo mis controles?

Question

estoy usando jQuery plugins FancyBox y JSVideo, en última instancia, quiero un vídeo a través de popup FancyBox y tener la reproducción de vídeo HTML5 en ese emergente

tengo unas pocas cosas de trabajo - el único problema es que los controles de vídeo no son lo i esperar ... que no tiene la jsvideo controls..i no sé si es un FancyBox o una cosa css, o ambos

el hTML es simple - es una miniatura que apunta a javascript

<a title="test" name="test" href=""javascript:;" class="fancyvideo5"><img alt="kirk monteux micro-agentur.de grafik design" src="http://www.micro-agentur.com/media/bilder/grafik220.jpg" /></a>  

y el javascript se ve así:

<script type="text/javascript"> 

    $(document).ready(function() { 


     $("a.fancyvideo5").click(function() { 
      var url = $(this).attr('name'); 

      $.fancybox({ 
       'padding': 7, 
       'overlayOpacity': 0.7, 
       'autoDimensions': false, 
       'width': 640, 
       'height': 480, 
       'content': '<div><div class="video-js-box vim-css">' + 
          '<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' + 
          '<source src="' + url + '.mp4" />' + 
          '<source src="' + url + '.webm" />' + 
          '<source src="' + url + '.ogv" />' + 
           '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + 
           '<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' + 
           'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' + 
           '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + 
           '<param name="allowfullscreen" value="true" />' + 
           '<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' + 
           '<!-- Image Fallback. Typically the same as the poster image. -->' + 
           '<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' + 
           ' title="No video playback capabilities." />' + 
           '</object>' + 
          '</video>' + 
          '</div></div>', 
       'onComplete': function() { $("#fancybox-inner").css({ 'overflow': 'hidden' }); }, 
       'onClosed': function() { $("#fancybox-inner").empty(); } 
      }); 
      return false; 
     }); // fancyvideo 

     VideoJS.setupAllWhenReady(); 
    }); 

</script> 

el nombre en el enlace html es solo la ruta completa del archivo, por lo que tengo un mp4 en algún lugar del servidor.

Hay controls..but Creo que es el control de vídeo HTML5 defecto, y no los controles jsvideo ...

si tomo FancyBox fuera de él - y sólo hay que poner la línea jsvideo como esto

<!-- Begin VideoJS --> 
       <div class="video-js-box"> 
       <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> 
       <video id="example_video_1" class="video-js" width="320" height="240" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png"> 
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
        <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> 
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' /> 
        <!-- Image Fallback. Typically the same as the poster image. --> 
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" 
         title="No video playback capabilities." /> 
        </object> 
       </video> 
       <!-- Download links provided for devices that can't play video in the browser. --> 
       <p class="vjs-no-video"><strong>Download Video:</strong> 
        <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, 
        <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, 
        <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br> 
        <!-- Support VideoJS by keeping this link. --> 
        <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS 
       </p> 
       </div> 
       <!-- End VideoJS --> 

Viene el video con los controles adecuados, ¿es porque estoy tratando de incluir un contenido de fancybox?

Gracias

Answer 1

Peter tenía razón sobre la onComplete. Si está forzando al reproductor Flash, entonces VideoJS se está ejecutando al menos, mientras que no era antes si estaba viendo los controles predeterminados del navegador. Solo fuerza la recuperación del flash si no cree que pueda reproducir el archivo.

VideoJS utiliza el atributo "tipo" para comprobar, que parece que ha eliminado. Agregue nuevamente adentro:

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 

al MP4, y usted puede ver que funcione. También querrás agregar el tipo a las otras fuentes. Espero que ayude.

Answer 2

trate de poner en VideoJS.setupAllWhenReady();$.fancybox.onComplete.

El contenido de su fancybox probablemente no está en el DOM cuando jsVideo intenta aplicar los controles de video.

De esta manera:

<script type="text/javascript"> 
    $(function() {  
     $("a.fancyvideo5").click(function() { 
      var url = $(this).attr('name'); 

      $.fancybox({ 
       'padding': 7, 
       'overlayOpacity': 0.7, 
       'autoDimensions': false, 
       'width': 640, 
       'height': 480, 
       'content': '<div><div class="video-js-box vim-css">' + 
          '<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' + 
          '<source src="' + url + '.mp4" />' + 
          '<source src="' + url + '.webm" />' + 
          '<source src="' + url + '.ogv" />' + 
           '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + 
           '<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' + 
           'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' + 
           '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + 
           '<param name="allowfullscreen" value="true" />' + 
           '<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' + 
           '<!-- Image Fallback. Typically the same as the poster image. -->' + 
           '<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' + 
           ' title="No video playback capabilities." />' + 
           '</object>' + 
          '</video>' + 
          '</div></div>', 
       'onComplete': function() { 
        $("#fancybox-inner").css({ 'overflow': 'hidden' }); 
        VideoJS.setupAllWhenReady(); 
       }, 
       'onClosed': function() { $("#fancybox-inner").empty(); } 
      }); 
      return false; 
     }); // fancyvideo 
    }); 
</script> 

Editar: Este plugin puede ser relevante para usar: http://videojs.com/jquery/

Answer 3

Espero que ya hayas conseguido la solución. Te faltaban otros formatos y la etiqueta type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'. Funcionó para mí :)

Answer 4

Esto es lo que funcionó para mí. Tendrás que personalizar para que se ajuste a tus necesidades, por supuesto.

Código en la cabeza: Enlace

<script type="text/javascript"> 
$(document).ready(function() { 
    $("a.fancyvideo5").click(function() { 
     var url = $(this).attr('name'); 
     $.fancybox({ 
      'padding': 7, 
      'overlayOpacity': 0.7, 
      'autoDimensions': false, 

      'content': '<div class="video-js-box">' + 
         '<video class="video-js" width="635" height="475" controls preload>' + 
         '<source src="' + url + '"' + 'type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"' + '/> ' + 
         '</video>' + 
         '</div>', 
      'beforeShow': function() { 
      VideoJS.setupAllWhenReady(); 
      }, 


     }); 
    }); 


}); 

</script> 

Image:

<a class="fancyvideo5" name="video/animation/animation_zemibank.mp4"><img src="images/misc/spotlight_images/spotlight_animation.png" width="248" height="145" alt="Film" /></a> 

Answer 5

<div class="video-js-box"> 
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> 
    <!-- Download links provided for devices that can't play video in the browser. --> 
    <p class="vjs-no-video"> 
     <a href="video/video-2011-11-27-20-26-40.mp4">video</a> 
    </p> 
</div> 

Answer 6

yo estaba tratando para esto también y finalmente tuvo este trabajo para mí mediante el uso de la aproximación por debajo .

jQuery(document).ready(function(){ 
    jQuery("a#videolink").fancybox({ 
     frameWidth: 800, 
     frameHeight: 450, 
     overlayShow: true, 
     overlayOpacity: 0.7 
    }); 
}); 


<a id="videolink" href="#MYID" title="Test Video"> 
    <img src="mp4test.jpg" width="248" height="145" /> 
</a> 

<div style="display:none"> 
     <video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin" 
      controls preload="auto" width="300" height="300" data-setup="{}" > 
     <source src="mp4test.mp4" type='video/mp4'> 
    </video> 
</div> 

Answer 7

Para escribir este script en un estilo más simple, debe usar la propiedad beforeLoad de fancybox. Es en esa redefinición que define su contenido. En mi caso, el elemento attr contiene el nombre del archivo, así puedo configurar múltiples fuentes de formato de video.

$("a.fancybox_video").fancybox({ 
     'padding': 7, 
     'overlayOpacity': 0.7, 
     'autoDimensions': false, 
     'width': 640, 
     'height': 480, 
     'beforeLoad': function() { 
         this.content = '<video width="640" height="480" controls="controls">'+ 
         '<source src="' + $(this.element).attr('name') + '.mp4" type="video/mp4"></source> ' + 
         '<source src="' + $(this.element).attr('name') + '.webm" type="video/webm"></source>' + 
         'Your browser does not support the HTML 5 video tag'+ 
         '</video>'; 
     }, 
     'onComplete': function() { $("#fancybox-inner").css({ 'overflow': 'hidden' }); }, 
     'onClosed': function() { $("#fancybox-inner").empty(); } 
});