Interrompi tutti i video iframe in riproduzione su clic su un collegamento javascript

Question

Ho una lista di video iframe nella mia pagina web.

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

Ho bisogno di fermare tutti i video iframe che giocano sul fare clic sul collegamento Stop all videos. Come lo posso fare?

Answer 1

provare in questo modo,

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

Answer 2

Ricarica tutti iframe di nuovo per fermare i video

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

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

Answer 3

Questo dovrebbe smettere di tutti i video che giocano in tutte le iframe sulla pagina:

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

Answer 4

I modificato un po 'il codice sopra e il seguente ha funzionato per me .......

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

Answer 5

$("#close").click(function(){ 
    $("#videoContainer")[0].pause(); 
}); 

Answer 6

mezzi di fermo pausa e l'impostazione del video al tempo 0:

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

Questo codice jQuery farà esattamente questo.

Non è necessario sostituire l'attributo src e ricaricare nuovamente il video.

---

Poco funzione che sto utilizzando nel mio progetto:

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

Answer 7

È possibile modificare questo codice con un'iterazione

/** 
* 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(); 
    } 
}; 

PROPRIETARIO: https://gist.github.com/cferdinandi/9044694 anche postato qui (da me) : how to destroy bootstrap modal window completely?

Answer 8

Ricaricamento di tutti gli iframe solo per st op loro è una pessima idea. Dovresti trarre vantaggio da ciò che viene fornito con HTML5.

Senza utilizzare la libreria iframe_API di YouTube; è sufficiente utilizzare:

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

che interromperà tutti i video iframe youtubes.

È possibile utilizzare queste parole chiave del messaggio di start/stop/pausa youtube embdded video:

stopVideo 
playVideo 
pauseVideo 

Scopri sul link qui sotto per il demo live:

https://codepen.io/mcakir/pen/JpQpwm