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?
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?
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&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&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&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&enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true">
</object>