Question

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

I’m trying to recreate this with embedded youtube videos that are added dynamically via the normal embed code.

Using this: https://stackoverflow.com/a/7513356/938089
and this: https://stackoverflow.com/a/7988536/1470827

I’m able to get 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’s a JS Bin with it half working: http://jsbin.com/oxoyes/2/edit

Currently, its only calling one of the players. I need it to pause ALL of the other players except the playing one.

Also, any tips on how to clean this up and/or do it differently/better are welcome. I’m still very new to javascript so I’m not even sure I’m going about it the right way.

Thanks!

Answer 1

You’ll only have at most one player playing at a given time. Instead of trying to pause all that are playing, think of it as trying to pause the one playing. Of course, none could be playing. Given this, take a look at the following code. You maintain a single outer scope variable and pause that when necessary, while setting it to the player you just started playing thereafter.

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;

                        }            

                    }
                }        
        });
    });
}