一次播放一个 YouTube 视频 [英] Playing one YouTube video at a time

问题描述

我将在此代码中进行哪些调整，以便一次只能播放一个视频?设置它以便如果我点击另一个视频，它之前的视频会暂停?这是我一直在尝试做的事情，但似乎不知道该怎么做.

What would I adjust in this code so that only one video is able to play at a time? Setting it up so that if I click on another video, the video before it will pause? This is something I've been trying to do and can't seem to figure out how to.

这是怎么做到的?我要向其中添加什么代码才能实现此功能?

How would this be done? What piece of code would I add to it for this functionality to occur?

代码

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

推荐答案

这个 jsfiddle 示例 演示了如何播放一个视频并暂停另一个视频而不必循环播放每个视频.我使用 iframe 标签来显示视频，但在使用 javascript 初始化视频时也可以应用此逻辑.

This jsfiddle example demonstrates how to play one video and pause another without having to loop through every video. I use the iframe tag to display videos but this logic can also be applied when using javascript to initialize videos.

var currentPlayer;
var autopaused;
var pnWelwegrNfQ;
var p9HfzcqeS2SU;
var pjDV5q37rGlg;
function onYouTubeIframeAPIReady() {
    pnWelwegrNfQ = new YT.Player('pnWelwegrNfQ', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    p9HfzcqeS2SU = new YT.Player('p9HfzcqeS2SU', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    pjDV5q37rGlg = new YT.Player('pjDV5q37rGlg', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
}
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PAUSED && currentPlayer != undefined && event.target == currentPlayer) {
        autopaused = undefined;
        currentPlayer = undefined;
    } else if (event.data == YT.PlayerState.PAUSED && autopaused != undefined && (event.target == autopaused && event.target != currentPlayer)) {
        autopaused = undefined;
    } else if (event.data == YT.PlayerState.PLAYING && event.target != autopaused) {
        autopaused = currentPlayer;
        if (autopaused != undefined) {
            currentPlayer = event.target;
            autopaused.pauseVideo();
        } else {
            currentPlayer = event.target;
        }
    } else if (autopaused != undefined && event.target == autopaused) {
        autopaused = undefined;
    }
}

这篇关于一次播放一个 YouTube 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！