Only the video that is clicked on should play-CodePudding

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);
  }

CodePudding user response：

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();
      });
    });
  }

Since there is only one exit class button, the forEach loop only executes once. Hence calling createStopHandler three times, once for each player, simply adds three separate stop handlers which stop a specific video. Two videos that are already stopped are stopped again with no harm done.

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.

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.

CodePudding user response：

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