it-swarm.com.de

Stoppen Sie die Wiedergabe der Videos im Iframe, wenn Modal geschlossen ist

Ich habe ein Wiedergabebild mit dem Text "Video ansehen". Wenn Sie darauf klicken, wird ein modales Bootstrap-Fenster geöffnet, in dem Sie das von mir eingefügte Video wiedergeben können. Das Problem, das ich dabei habe, ist, wenn ich das Video abspiele und den Bildschirm verlasse, während es abgespielt wird. Das Video wird weiterhin im Hintergrund abgespielt. Wenn ich erneut auf den Link "Video abspielen" klicke, wird das Video an der Stelle wiedergegeben, an der es zuvor angehalten hat.

Ich muss das Video stoppen, wenn das modale Fenster geschlossen ist. Es muss dann das Video von Anfang an abspielen, wenn ich das nächste Mal auf den Link "Video ansehen" klicke. Ich bin noch neu in diesem Bereich und bin nicht sicher, wie ich das machen soll. Weiß jemand, wie ich das erreichen kann?

<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>
3

Ich habe es geschafft, es mit dem von @Leo bereitgestellten Link zum Laufen zu bringen. Es war jedoch langsam, da der Frame jedes Mal neu geladen wurde, wenn auf den Link geklickt wurde. Versucht @guillesalazar Lösung von Twitter Bootstrap Modal Youtube Video zu stoppen und es hat perfekt funktioniert. Dies war die Lösung, die ich verwendet habe.

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

Sie müssen das Video nur beim Ereignis hidden.bs.modal anhalten:

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

Hier ist eine sehr ähnliche (wenn nicht gleich) Vorgehensweise: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal

Sie verwenden die iframe-API nicht. Bei jedem Schließen des Modals wird die Video-URL gelöscht. .attr('src', '');

1

Für mehrere Modals mit iframe-Videos ist hier die Lösung:

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

Beim Schließen des Modals werden alle iFrame-Videos durchsucht und zurückgesetzt, anstatt alle auf das erste Video zurückzusetzen.

1
sandman8888

Naja man kann einfach den src vom iframe entfernen und den wieder zurücksetzen wie;

 <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>

jetzt der jquery teil

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