Воспроизведение одного видео на YouTube за раз

Question

Что бы я изменил в этом коде, чтобы за один раз можно было воспроизводить только одно видео?Настроить так, чтобы, если я нажму на другое видео, видео перед ним остановилось?Это то, что я пытался сделать, и не могу понять, как это сделать.

Как бы это сделать?Какой фрагмент кода я бы добавил к нему, чтобы эта функция появилась?

Код

https://jsfiddle.net/d72Lp43v/293/

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(50); // percent
  }

  function onPlayerStateChange(event) {

  }

  function addVideo(video, desiredPlayerVars) {
    const videoId = video.getAttribute("data-id");
    const defaultPlayerVars = {
      autoplay: 1,
      controls: 1,
      showinfo: 1,
      rel: 0,
      iv_load_policy: 3,
      cc_load_policy: 0,
      fs: 0,
      disablekb: 1
    };
    const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      // defaultPlayerVars,
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }
  let apiIsReady = false;
  let timer;
  window.onYouTubePlayerAPIReady = function() {
    apiIsReady = true;
  };
  // function init(video) {
  function init(opts) {
    loadPlayer();
    timer = setInterval(function checkAPIReady() {
      if (apiIsReady) {
        timer = clearInterval(timer);
        addVideo(opts.video, opts.playerVars || {});
      }
    }, 100);
  }
  return {
    init
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 900,
        end: 1200
      }
    });
  }
  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playc");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playd");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playe");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playf");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playg");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playh");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playi");
  cover.addEventListener("click", coverClickHandler);
}());

Answer 1

Вы можете попытаться реализовать свой код примерно так:

 <div id="player1"></div>
 <div id="player2"></div>
 <!-- add as many as you need -->
 <script>
   var tag = document.createElement('script');
   tag.src = "//www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player={};
function onYouTubeIframeAPIReady() {
    player.player1 = new YT.Player('player1', {
        height: '293',
        width: '520',
        videoId: 'zXV8GMSc5Vg',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player.player2 = new YT.Player('player2', {
        height: '293',
        width: '520',
        videoId: 'LTy0TzA_4DQ',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });

}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        pauseVideos(event.target.a.id); 
    }
}

function pauseVideos(player_id) {
    for (p in player) {
        if (p!==player_id) {
          player[p].pauseVideo(); // all videos will pause playing except the one that triggered the event
        }
    }
}
</script>

Вам просто нужно задать имя для каждого игрока, чтобы они имели свою индивидуальность, чтобы при наличии условия это можно было легко реализовать.Я понимаю, что вы просто хотите сделать динамический колл для своего игрока, но это будет сложно, если вы захотите иметь такое условие.Попробуйте изменить свой код в соответствии с этим.Я действительно пытался реализовать это на onPlayerStateChange(), но из-за того же имени игрока для event.target я не могу сформулировать правильное условие.Надеюсь, это поможет!