it-swarm.com.de

Stoppen Sie die Wiedergabe von Iframe-Videos, indem Sie auf einen Link-Javascript klicken

Ich habe eine Liste von Iframe-Videos auf meiner Webseite.

<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<a href="#" class="close">Stop all videos</a>

Ich muss die Wiedergabe von Iframe-Videos beenden, indem Sie auf den Link Stop all videos klicken. Wie kann ich das machen?

21
Sam Hanson

Versuchen Sie es so,

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
    $('.close').click(function(){      
        $('iframe').attr('src', $('iframe').attr('src'));
    });
});
</script>
47
Swarne27

Dadurch sollten alle Videos in allen iframes auf der Seite abgespielt werden:

$("iframe").each(function() { 
        var src= $(this).attr('src');
        $(this).attr('src',src);  
});
13
user163861

Anhalten bedeutet, das Video anzuhalten und den Zeitpunkt 0 einzustellen: 

        $('iframe').contents().find('video').each(function () 
        {
            this.currentTime = 0;
            this.pause();
        });

Dieser Jquery-Code wird genau das tun.

Sie müssen das src-Attribut nicht ersetzen und das Video erneut laden.


Kleine Funktion, die ich in meinem Projekt verwende: 

    function pauseAllVideos() 
    { 
        $('iframe').contents().find('video').each(function () 
        {
            this.pause();
        });
        $('video').each(function () 
        {
            this.pause();
        });
    }
8
Kai Noack

Ich habe den obigen Code ein wenig editiert und der folgende funktionierte für mich ....... 

<script>
function stop(){<br/>
       var iframe = document.getElementById('myvid');<br/>
     var iframe1 = document.getElementById('myvid1');<br/>
      var iframe2 = document.getElementById('myvid2');<br/>
    iframe.src = iframe.src;<br/>
    iframe1.src=iframe1.src;<br/>
    iframe2.src=iframe2.src;<br/>
}<br/>

</script>
2
Yash

Alle iframes neu zu laden, um sie zu stoppen, ist eine schreckliche Idee. Sie sollten den Vorteil von HTML5 nutzen.

Ohne Verwendung der iframe_API-Bibliothek von YouTube; Sie können einfach verwenden:

var stopAllYouTubeVideos = () => { 
  var iframes = document.querySelectorAll('iframe');
  Array.prototype.forEach.call(iframes, iframe => { 
    iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', 
  func: 'stopVideo' }), '*');
 });
}
stopAllYouTubeVideos();

dadurch werden alle Youtubes-Videos gestoppt.

Sie können diese Nachrichtenschlüsselwörter zum Starten/Stoppen/Anhalten von in YouTube eingebetteten Videos verwenden:

stopVideo
playVideo
pauseVideo

Schauen Sie sich den Link unten für die Live-Demo an:

https://codepen.io/mcakir/pen/JpQpwm
1
Must Ckr
$("#close").click(function(){
  $("#videoContainer")[0].pause();
});
0
krunal

Hier ist eine reine Javascript-Lösung im Jahr 2019

const videos = document.querySelectorAll('iframe');
const close = document.querySelector('.close');

close.addEventListener('click', () => {
   videos.forEach((i) => {
      let source = i.src;
      i.src = '';
      i.src = source;
   });
});
0

Sie können diesen Code mit einer Iteration ändern 

/**
 * Stop an iframe or HTML5 <video> from playing
 * @param  {Element} element The element that contains the video
 */
var stopVideo = function ( element ) {
    var iframe = element.querySelector( 'iframe');
    var video = element.querySelector( 'video' );
    if ( iframe ) {
        var iframeSrc = iframe.src;
        iframe.src = iframeSrc;
    }
    if ( video ) {
        video.pause();
    }
};

BESITZER: https://Gist.github.com/cferdinandi/9044694 Auch hier (von mir) gepostet: Wie kann ich das modifizierte Bootstrap-Fenster vollständig zerstören?

0
TheyDontHaveIT

Laden Sie alle iframes erneut, um die Videos zu stoppen

<a href="#" class="close" onclick="stop();">Stop all videos</a>

function stop(){
    var iframe = document.getElementById('youriframe');
    iframe.src = iframe.src;
}
0
Murali Prasanth