点击后视频无法播放

Question

当您点击红色播放时，视频会立即开始播放。你可以听到音乐和一切。

当您点击蓝色播放时，视频不会开始播放。视频没有开始播放，也没有音乐播放。

没有声音，点击蓝色播放后也没有音乐播放。视频应该在点击蓝色播放后立即开始播放。这正是它在红色播放上的工作原理。

单击蓝色播放应该与单击红色播放完全相同。

点击红色播放后，视频立即开始播放。

点击蓝色播放后，视频不开始播放。

点击运行不更新测试代码。

https://jsitor.com/BOZXPYBWuq

有人可以看看他们是否能够解决这个问题。

我怎样才能让第二个视频在被点击时开始播放？

它应该与点击Red播放相同。

在代码中，Red & Blue play 都使用.thePlay 作为一个类。

需要在代码中调整或更改哪些内容才能正常工作？

这是它的流程：

由于某种原因，它只允许 1st .thePlay 类在点击时播放，2nd .thePlay 视频类在您点击时不会启动它。也就是说，视频没有开始播放。

从这里开始：

function play() {
   player.playVideo();
 }
 return {
   addPlayer,
   play
 };
}());

到这里：

function onYouTubeIframeAPIReady() {
 const cover = document.querySelector(".thePlay");
 const wrapper = cover.parentElement;
 const frameContainer = wrapper.querySelector(".video");
 videoPlayer.addPlayer(frameContainer);

到这里：

(function initCover() {

 function coverClickHandler() {
   videoPlayer.play();
 }

 const cover = document.querySelector(".thePlay");
 cover.addEventListener("click", coverClickHandler);
}());

完整代码：

const manageCover = (function makeManageCover() {
 const config = {};

 function show(el) {
   el.classList.remove("hide");
 }

 function hide(el) {
   el.classList.add("hide");
 }

 function hideAll(elements) {
   elements.forEach(hide);
 }

 function showCovers(playButton) {
   const cover = playButton.parentElement;
   cover.classList.add("active");
   show(cover);
 }

 function coverClickHandler(evt) {
   hideAll(config.containers);
   const cover = evt.currentTarget;
   showCovers(cover);
 }

 function addClickToButtons(playButtons) {
   playButtons.forEach(function addEventHandler(playButton) {
     playButton.addEventListener("click", coverClickHandler);
   });
 }

 function addCoverHandler(coverSelector, handler) {
   const cover = document.querySelector(coverSelector);
   cover.addEventListener("click", handler);
 }

 function init(selectors) {
   config.containers = document.querySelectorAll(selectors.container);
   const playButtons = document.querySelectorAll(selectors.playButton);
   addClickToButtons(playButtons);
 }

 return {
   addCoverHandler,
   init,
   show
 };
}());

const videoPlayer = (function makeVideoPlayer() {
 const players = [];
 let playerVars = {};
 let player = null;

 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) {
   player = event.target;
   player.setVolume(100);

 }

 function addPlayer(video, settings) {
   const playerVarDefaults = {
     host: "https://www.youtube-nocookie.com",
     videoId: video.dataset.id
   };
   playerVarDefaults.events = {
     "onReady": onPlayerReady
   };
   playerVars = Object.assign(playerVarDefaults, settings);
   players.push(new YT.Player(video, playerVars));
 }

 function play() {
   player.playVideo();
 }
 return {
   addPlayer,
   play
 };
}());

const managePlayer = (function makeManagePlayer() {
 const defaults = {
   height: 600,
   width: 360
 };
 defaults.playerVars = {
   controls: 1,
   disablekb: 1,
   enablejsapi: 1,
   fs: 0,
   iv_load_policy: 3,
   rel: 0
 };

 function show(el) {
   el.classList.remove("hide");
 }

 function createPlayerOptions(settings) {
   function paramInOptions(opts, param) {
     if (settings[param] !== undefined) {
       opts[param] = settings[param];
       delete settings[param];
     }
     return opts;
   }

   const optionParams = ["width", "height", "videoid", "host"];
   const preferred = optionParams.reduce(paramInOptions, {});
   const playerOptions = Object.assign({}, defaults, preferred);
   // settings should now only consist of playerVars
   const playerVars = Object.assign({}, defaults.playerVars, settings);
   playerOptions.playerVars = playerVars;
   return playerOptions;
 }

 function createPlayer(videoWrapper, settings = {}) {
   const video = videoWrapper.querySelector(".video");
   const playerOptions = createPlayerOptions(settings);
   return videoPlayer.addPlayer(video, playerOptions);
 }

 function createCoverClickHandler(playerSettings) {
   return function coverClickHandler(evt) {
     const cover = evt.currentTarget;
     const wrapper = cover.nextElementSibling;
     show(wrapper);
     const player = createPlayer(wrapper, playerSettings);
     wrapper.player = player;
   };
 }

 function addPlayer(coverSelector, playerSettings) {
   const clickHandler = createCoverClickHandler(playerSettings);
   manageCover.addCoverHandler(coverSelector, clickHandler);
 }

 return {
   add: addPlayer
 };
}());
function onYouTubeIframeAPIReady() {
 const cover = document.querySelector(".thePlay");
 const wrapper = cover.parentElement;
 const frameContainer = wrapper.querySelector(".video");
 videoPlayer.addPlayer(frameContainer);

 managePlayer.add(".playa", {
   height: 207,
   start: 4,
   width: 277
 });
 managePlayer.add(".playb", {
   height: 207,
   width: 277
 });
 manageCover.init({
   container: ".container",
   playButton: ".thePlay"
 });
}
(function initCover() {

 function coverClickHandler() {
   videoPlayer.play();
 }

 const cover = document.querySelector(".thePlay");
 cover.addEventListener("click", coverClickHandler);
}());

HTML

<div class="outer">
    <div class="container with-curtain">
        <svg class="playa thePlay" width="100%" height="100%" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </svg>
        <div class="inner-container curtain curtain1">
            <div class="ratio-keeper">
                <div class="wrapa">
                    <div class="video video-frame" data-id="qe5WF4qCSkQ"></div>
                </div>
                <div class="panel-left"></div>
                <div class="panel-right"></div>
            </div>
        </div>
    </div>
    <!-- end container -->
    <div class="container with-curtain">
        <svg class="playb thePlay " width="100%" height="100%" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </svg>
        <div class="inner-container curtain curtain2">
            <div class="ratio-keeper">
                <div class="wrapa">
                    <div class="video video-frame" data-id="2VwsvrPFr9w"></div>
                </div>
                <div class="panel-left"></div>
                <div class="panel-right"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

问题似乎出在这个函数上（我添加了console.log用于调试目的）：

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".thePlay");console.log(cover);

虽然它确实被调用了两次，每次加载两个视频时，它首先将变量覆盖设置为 first 视频，以便设置为立即运行两次。未选择第二个视频。

您需要查看逻辑，以便选择正确的视频并对其进行初始化以开始播放。

Answer 2

• 您的代码真的太长了，我无法查看它的所有部分，但是正如您在帖子中提到的那样，红色按钮是第一个，蓝色是第二个，我想已经完成了，因为您已使用 querySelector选择按钮，但不幸的是 querySelector 只返回您需要使用的第一个元素 querySelectorAll 并制作类似的循环

function onYouTubeIframeAPIReady() {
 const cover = document.querySelectorAll(".thePlay");
 for(let i of cover) {
   let wrapper = i.parentElement,
   frameContainer = wrapper.querySelector(".video");
   videoPlayer.addPlayer(frameContainer);
  } 
}

希望对你有帮助