How to stop simultaneous playback of embedded Youtube videos

Question

SoundCloud players have a default feature, when a user starts the player, it automatically pauses all the others that are currently playing. (example: http://jsfiddle.net/Vx6hM/ ).

I am trying to recreate this with embedded YouTube videos that are added dynamically through regular embed code.

Using this: https://stackoverflow.com >

I can go this far:

function chain(){ $('.post').each(function(){ var player_id = $(this).children('iframe').attr("id"); var other_player_id = $(this).siblings().children('iframe').attr("id"); player = new YT.Player( player_id, { events: { 'onStateChange': function (event) { if (event.data == YT.PlayerState.PLAYING) { callPlayer( other_player_id , 'pauseVideo' ); alert('Trying to pause: ' + other_player_id); } } } }); }); } 

Here JS Bin works with him halfway: http://jsbin.com/oxoyes/2/edit

Currently, his only challenge to one of the players. I need to pause ALL other players except the game.

In addition, any advice on how to clean it and / or do it differently / better is welcome. I'm still very new to javascript, so I'm not even sure if I will go that route.

Thanks!

Answer 1

You will have only one player currently playing. Instead of trying to pause everything that plays, think about it while trying to pause the game. Of course, no one could play. Given this, take a look at the following code. You save one external scope variable and pause it when necessary when setting up the player that you just started playing after that.

 var playerCurrentlyPlaying = null; function chain(){ $('.post').each(function(){ var player_id = $(this).children('iframe').attr("id"); player = new YT.Player( player_id, { events: { 'onStateChange': function (event) { if (event.data == YT.PlayerState.PLAYING) { if(playerCurrentlyPlaying != null && playerCurrentlyPlaying != player_id) callPlayer( playerCurrentlyPlaying , 'pauseVideo' ); playerCurrentlyPlaying = player_id; } } } }); }); } 

Answer 2

I think this may lead to your decision.

 var players=[]; function chain(id){ var player_id = $('#player'+id).attr('id'); players[id]=new YT.Player( player_id, { events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event){ var playerid=$(event.target).attr('id'); if(event.data!=-1 && event.data!=5){ for(i=1;i<players.length;i++){ if(playerid!=i){ players[i].stopVideo(); } } } } 

The problem with your previous code was that you, where you use each in the call function, so that it can execute 3 * 3 times, creating 9 player instances. So I made it that I store each instance in an array.

demo : http://jsbin.com/oxoyes/11/edit

Answer 3

I tried the path posted by cbayram and found that it was spotted success. I preferred fuzionpro, but I had to fix a few problems, and I went to the next one, which works well and includes console.logs so you can see what is happening. Combining ytPlayers and ytPlayerStates below will probably make it more efficient.

 // load the IFrame Player API code asynchronously var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var ytPlayers = new Array(); var ytPlayerStates = new Array(); window.onYouTubePlayerAPIReady = function() { jQuery('.video-container>iframe').each(function(index) { var iframeID = jQuery(this).attr('id'); ytPlayerStates[iframeID] = -1; (function (iframeID) { ytPlayers.push(new YT.Player(iframeID, { events: { 'onStateChange' : function (event) { console.log(iframeID+' '+event.data); if (event.data == 1) { ytPlayerStates[iframeID] = 1; for (var key in ytPlayerStates) { if (key != iframeID) { if (ytPlayerStates[key] == 1 || ytPlayerStates[key] == 3) { ytPlayerStates[key] = 2; callPlayer(key, 'pauseVideo') } } console.log(key+' : '+ytPlayerStates[key]); }; } } } })); })(iframeID); }); }