Geek Answers Handbook

Stop all videos when a new video is playing

I need help with Youtube API and embedded videos. I want to stop all iframe videos (here I took only 3, but there are several videos) that start on the current page when I click on a new YouTube video. At some point in time, only one iframe video should be triggered. I sent thruogh documentation [https://developers.google.com/youtube/js_api_reference{[1] and was able to write here ...

Updated:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://www.youtube.com/player_api"></script> <script type="text/javascript"> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { alert("hi5"); player1.stopVideo(); player2.stopVideo(); done = true; } } </script> </head> <body> <div>TODO write content</div> <ul class="image-grid" id="list"> <li> <iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> </li> <li> <iframe id="player1" width="385" height="230" src="http://www.youtube.com/embed/wSrA5iQGlDc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> </li> <li> <iframe id="player2" width="385" height="230" src="http://www.youtube.com/embed/c7b_WLkztXc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> </li> </ul> </body> </html>

UPDATED

  • The onStateChange event does not fire (works)
  • In this example, I have 3 videos, actually it has more videos instead of writing onPlayerStateChange for each video .. is it possible to use an array for all videos .. and in the onPlayerStateChange function to record the player [] .stopVideo () and this. playvideo () .. something like that .. (need help) see this script http://jsfiddle.net/LakshmiV/kn5Sf/ Please help.
+4
source share
3 answers

You can do something like this ...

Give each iframe a class so that it can be identified as an iframe for youtube player. Here I gave "yt_players"

Now you can use the code below ...

 <script type="text/javascript"> players = new Array(); function onYouTubeIframeAPIReady() { var temp = $("iframe.yt_players"); for (var i = 0; i < temp.length; i++) { var t = new YT.Player($(temp[i]).attr('id'), { events: { 'onStateChange': onPlayerStateChange } }); players.push(t); } } onYouTubeIframeAPIReady(); function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { var temp = event.target.a.src; var tempPlayers = $("iframe.yt_players"); for (var i = 0; i < players.length; i++) { if (players[i].a.src != temp) players[i].stopVideo(); } } } </script>

Updated the code ... This should help you.

See here ... http://jsfiddle.net/anubhavranjan/Y8P7y/

+8
source

Coby's excellent answer to a similar question at fooobar.com/questions/1463793 / ...

Using the attribute selector , you can target any iframe that comes from Youtube, and then with jQuery each , you can skip all of them.

 $(function(){ $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) { this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); });

});

+2
source

Good concept, but event.target.a.src does not work! Changed it to event.target.getVideoUrl () and it works fine. check here

 function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { var temp = event.target.getVideoUrl(); var tempPlayers = $("iframe.yt_players"); for (var i = 0; i < players.length; i++) { if (players[i].getVideoUrl() != temp) players[i].stopVideo(); } }

}

http://jsfiddle.net/Y8P7y/82/

+1
source

More articles:


All Articles