Question

我正在尝试复制此功能：单击新视频后可以暂停所有视频。单击另一视频后，应该暂停之前的视频。我正在尝试在我的代码中实现它，但是没有成功。如何在我的代码中使用该功能？

使用我的代码：

我的尝试：

工作版本：最近更新，尝试添加第二部分。

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

let players = new Array();

  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) {
    if (event.data == YT.PlayerState.PLAYING) {
      const temp = event.target.getVideoUrl();
      const tempPlayers = ("video");
      for (let i = 0; i < players.length; i++) {
        if (players[i].getVideoUrl() != temp) players[i].pauseVideo();
      }
    }
  }

  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);
    const temp = document.querySelectorAll("video");
    for (let i = 0; i < temp.length; i++) {
    //const t = new YT.Player(temp[i].id, {

    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      // defaultPlayerVars,
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
        }
      });
      players.push(t);
    }
  }
  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);
}());

工作版本：最近更新，尝试添加第二部分。这是哪个部分：

https://jsfiddle.net/d72Lp43v/284/

我在移动此部分时遇到问题：

function onYouTubeIframeAPIReady() {
    const temp = document.querySelectorAll("video");
    for (let i = 0; i < temp.length; i++) {
        const t = new YT.Player(temp[i].id, {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        players.push(t);
    }
}

进入此处：

const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      // defaultPlayerVars,
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

据我所知：

我无法在以下位置添加此行：

const t = new YT.Player(temp[i].id, {

需要以某种方式将此行与之结合：我不知道该怎么做。

new YT.Player(video, {

https://jsfiddle.net/d72Lp43v/283/

const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
const temp = document.querySelectorAll("video");
for (let i = 0; i < temp.length; i++) {
// const t = new YT.Player(temp[i].id, {

new YT.Player(video, {
  width: 200,
  height: 200,
  videoId: videoId,
  // defaultPlayerVars,
  playerVars,
  events: {
    "onReady": onPlayerReady,
    "onStateChange": onPlayerStateChange
        }
    });
    players.push(t);
}
}

点击另一个YouTube视频后，该视频应该会暂停

0 个答案: