0

I have a page with a few YouTube video embed codes. When a user clicks "> play" on one video every other video on the page needs to pause otherwise their audio overlaps the new one just played.

What's the most efficient way of implementing this?

Peter Craig
  • 7,101
  • 19
  • 59
  • 74
  • yes the simple options to play/pause are in the API but this was enough of a variant to open discussion; and this is the point of Stack Overflow in the first place regardless of how arbitrary some questions might appear. Even the YouTube demo page does't address this exact issue as a standard: http://code.google.com/apis/youtube/youtube_player_demo.html – Peter Craig Jul 24 '11 at 01:46
  • It's a similar query to http://stackoverflow.com/questions/6671232/youtube-api-stop-video and offers a space for anyone wanting a quick solution to the same issue in future being able to find it here. – Peter Craig Jul 24 '11 at 01:52
  • 1
    I reread my comment, and I apologize. It has a "snarky" tone that wasn't intended. What I should have asked was -- do you have a code example that you want to target a solution for? At least some HTML that shows how you are embedding? And better would be some stab at the a solution. Also you might want to be more precise about what you mean by efficient. – mjhm Jul 24 '11 at 07:43

1 Answers1

1

Alright here is a solution I came up with following some code from a few others.

In your .js file add the following:

var videos = {};

$(document).ready(function(){
  // assigns ids to all the embed tags
  var i = 0;
  $('embed').each(function() {
    $(this).attr('id', "embed"+i);
    i++
  });
});

function onYouTubePlayerReady(playerId) {

  // loop through all embed tags assign a listener object only if not already assigned
  $('embed').each(function() {
    var embedid = $(this).attr('id');
    var ytplayer = document.getElementById(embedid);
    if (videos[embedid] == undefined) {
        window["dynamicYouTubeEventHandler" + embedid] = function(state) { onytplayerStateChange(state, embedid); }
        ytplayer.addEventListener("onStateChange", "dynamicYouTubeEventHandler"+embedid);
    }
    videos[embedid] = true;
  });
}

function onytplayerStateChange(newState, playerId) {
    // If one of the videos was played
    if (newState == 1) {
        // loop through each of the embed tags
        $('embed').each(function() {
            var embedid = $(this).attr('id');
            var ytplayer = document.getElementById(embedid);
            // Only pause video if not the current player
            if(embedid != playerId) {
                var current_state = ytplayer.getPlayerState();
                // Only pause if not already started
                if (current_state != '-1') {    ytplayer.pauseVideo();  }
            }
        });
    }
}

Then in your html file, embed your youtube like so. Make sure you have enablejsapi=1 is at the end of the url to the YouTube file:

<object width="500" height="400">
    <param name="movie" value="http://www.youtube.com/v/ms6GAdy6dag?version=3&amp;enablejsapi=1">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <embed src="http://www.youtube.com/v/ms6GAdy6dag?version=3&amp;enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true">
</object>


<object width="500" height="400"><param name="movie" value="http://www.youtube.com/v/PegET_3FFAs?version=3&amp;enablejsapi=1">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <embed src="http://www.youtube.com/v/PegET_3FFAs?version=3&amp;enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true">
</object>
Austin Ginder
  • 516
  • 3
  • 5