To reproduce issue: Click on one play button, and the video loads.
Then Click on the X
Now click on a different play button and you will see, the video that was clicked on before is now playing, along with the video I just clicked on. So now there are 2 videos playing at the same time.
To test code, press Run, not update: https://jsitor.com/l_crlisuws
What would need to be adjusted in the code to fix that?
How is that fixed in the code?
function createStopHandler(player) {
const stopButtons = document.querySelectorAll(".exit");
stopButtons.forEach(function stopButtonHandler(buttons) {
buttons.addEventListener("click", function buttonClickHandler() {
player.stopVideo();
});
});
}
function createPlayHandler(player) {
const playButtons = document.querySelectorAll(".thePlay");
playButtons.forEach(function playButtonHandler(buttons) {
buttons.addEventListener("click", function buttonClickHandler() {
player.playVideo();
});
});
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
createStopHandler(player);
createPlayHandler(player);
}
You need to get all the players and check if any of them is already playing and then stop them.
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();
}
}
}
Here is the link for js fiddle Fiddle
The stop button handlers are created and added in
function createStopHandler(player) {
const stopButtons = document.querySelectorAll(".exit");
stopButtons.forEach(function stopButtonHandler(buttons) {
buttons.addEventListener("click", function buttonClickHandler() {
player.stopVideo();
});
});
}
Assuming createStopHandle is called for each of the three players, each exit button will have three click handlers, where each handler stops one video. Clicking an exit button will attempt to stop some videos that aren't playing but this should not have any unwanted side effects.
The play button handlers are created and added in
function createPlayHandler(player) {
const playButtons = document.querySelectorAll(".thePlay");
playButtons.forEach(function playButtonHandler(buttons) {
buttons.addEventListener("click", function buttonClickHandler() {
player.playVideo();
});
});
}
Now there are now three thePlay class buttons, so the forEach loop adds a handler to every button to play the player provided in the argument. So clicking a play button can start multiple videos, but it should only start one.
The solution is to only add a listener to a play button to play the one video, which I will leave to you to devise the workings thereof: the button needs a means of identifying the player it belongs to but (almost) nothing has been set up for that purpose.
Note - adding event listeners seems to occur when a play button is clicked and may be (is?) allowing the same event listener to be added multiple times. After fixing the handlers so that each button only ever starts one video, make sure the button only has one handler to play its video, as opposed to multiple event handlers to start the same video.
Edit: TLDR;
Clicking a start button is handled by coverClickHandler which calls createPlayer which calls videoPlayer.addPlayer which creates a new YT player, which when ready calls onPlayerReady which calls createStopHandler and createPlayHandler.
So every start click creates a new player, without deleting previous players for the same video, with no removal of event handlers that no longer make sense to call, and with no selection of the correct player to start when a start button is clicked.
This needs redesign. I wish you the best with the repairs!