2013-05-28 2 views
0

J'ai une vidéo graphique pour déclencher un modal Bootstrap qui contient une vidéo HTML5. Je dois obtenir la vidéo pour commencer à jouer quand le modal apparaît et je ne semble pas être en mesure de le sélectionner avec jQuery.Lecture vidéo HTML5 sur Twitter Bootstrap Apparence modale

L'image de déclenchement a un ID de btnVideo.

Voici le code modal:

<div id="modal-video-view" class="modal hide fade in" style="display:none;"> 
    <div class="modal-header"> 
     <h3>Property Video</h3> 
    </div> 
    <div class="modal-body"> 
     <div id="vid"> 
      <video width="520" height="380" preload autostart id="myVideo"> 
       <source src="videos/homeVideo.mp4" type="video/mp4"> 
       <source src="videos/homeVideo.ogg" type="video/ogg"> 
      </video> 

      <script> 
       jwplayer("myVideo").setup({ 
        modes: [ 
         { type: "flash", src: "js/jw_player_5.8/player.swf" }, 
         { type: "html5" } 
        ] 
       }); 
      </script> 
     </div> <!-- END vid DIV --> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 
    </div> 
</div> 

et voici ma tentative jquery:

$(document).ready(function(){ 
    $('#btnVideo').click(function(){ 
    $('#modal-video-view').modal(); 
    $('#myVideo').get(0).play(); 
     }); 
}); 

La vidéo ne joue pas lorsque le modal est "modaled." Je ne sais pas mais c'est peut-être parce que jQuery n'est pas sûr si le m4a ou l'ogg est chargé ou si le flashback est en cours de lecture

Toute aide est grandement appréciée.

Jon

Répondre

1

J'ai trouvé la réponse dans la documentation de JW Player.

$('#btnVideo').click(function(){ 
    $('#modal-video-view').modal(); 
    jwplayer("myVideo").setup({ 
     modes: [ 
     { type: "flash", src: "js/jw_player_5.8/player.swf"}, { type: "html5" } 
     ] 
    }); 
    jwplayer("myVideo").play(); 
}); 
Questions connexes