web-dev-qa-db-fra.com

This is the lecture of the video of the video of the video of the themal is closed

J'ai une image de lecture avec le texte "Regarder la vidéo". Lorsque vous cliquez dessus, une fenêtre modale bootstrap s'ouvre pour lire la vidéo que j'ai insérée. J'ai la vue Moday qui convient au travail. Le problème que j'ai avec cela est lorsque je joue la vidéo et quitte l'écran pendant la lecture, la vidéo continue à jouer en arrière-plan. Si je clique à nouveau sur le lien Regarder la vidéo, la vidéo sera lue à l'endroit où elle s'était précédemment arrêtée.

Je dois arrêter la vidéo lorsque la fenêtre modale est fermée. La vidéo doit être lue dès le début lorsque je clique sur le lien "Regarder la vidéo". Je suis encore nouveau dans ce domaine et je ne sais pas comment faire cela. Quelqu'un sait comment je peux y arriver?

<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
    <img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>

        </div>
    </div>
</div>
htmlvideobootstrap-modal
3
Michelle Ashwini

J'ai réussi à le faire fonctionner avec le lien fourni par @Leo. Mais c'était lent car il rechargeait le cadre chaque fois que le lien était cliqué. Essayé solution @guillesalazar de Twitter Bootstrap Modal arrêter la vidéo Youtube et cela a fonctionné parfaitement. C'était la solution que j'ai utilisée.

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
13
Michelle Ashwini

Vous devez juste arrêter la vidéo sur l'événement hidden.bs.modal:

$('#myModal').on('hidden.bs.modal', function () {
    player.stopVideo();
   // or jQuery
   $('#playerID').get(0).stopVideo();
   // or remove video url
   $('playerID').attr('src', '');
})

Voici un très similaire (sinon égal) à ce que vous devez faire: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal

Ils n'utilisent pas l'API iframe, donc à chaque fois qu'ils ferment le modal, ils suppriment simplement l'URL de la vidéo .attr('src', '');

1
Leonardo Lanchas

Pour plusieurs modaux avec des vidéos iframe, voici la solution:

$('#myModal').on('hidden.bs.modal', function(e) {
  var $iframes = $(e.target).find('iframe');
  $iframes.each(function(index, iframe){
  $(iframe).attr('src', $(iframe).attr('src'));
  });
})

À la fermeture modale, il parcourt toutes les vidéos iframe et les réinitialise au lieu de les réinitialiser sur la première vidéo.

1
sandman8888

Eh bien, vous pouvez simplement supprimer le src de l’iframe et le remettre en place comme;

 <iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf  ?>" w></iframe>
 <span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton"  data-dismiss="modal"></span>

maintenant la partie Jquery

function stopVideo(id){
  var src = $j('iframe.'+id).attr('src');
  $j('iframe.'+id).attr('src','');
  $j('iframe.'+id).attr('src',src);

}
1
Kazi Hasan Ali