点击图片后 YouTube 不播放

Question

我试图在点击 Blue 播放后播放视频。

目前只有红色play在运行，也就是说，点击红色play后，视频开始播放。

如何让蓝色播放的视频在点击后开始播放，与红色一样？

要重现问题，点击蓝色播放，你会看到视频没有开始播放。

这些是播放图像，点击后会出现视频。

如何让 Blue 播放的视频在点击后开始播放？

我尝试了不同的方法，但无法让 Blue 播放的视频在点击后开始播放。

我尝试了这些方法中的每一种，但都没有用。

const cover = document.querySelectorAll(".playa, .playb");

const cover = document.querySelectorAll(".thePlay");

有谁知道点击 Blue 播放后如何播放视频？

需要在代码中进行哪些调整才能正常工作？

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

https://jsitor.com/s8E34OBRMK

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

function onYouTubeIframeAPIReady() {
  const cover = document.querySelectorAll(".playa");
  cover.forEach(function (cover) {
    const wrapper = cover.nextElementSibling;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);

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

(function initCover() {

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

  const covers = document.querySelectorAll(".playa");
  covers.forEach(function (cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());

完整的 YouTube 代码

const videoPlayer = (function makeVideoPlayer() {
  const players = [];
  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 defaults = {
      playerOptions: {
        events: {
          "onReady": onPlayerReady
        },
        host: "https://www.youtube-nocookie.com",
        videoId: video.dataset.id
      }
    };
    const playerOptions = Object.assign(defaults.playerOptions, settings);
    players.push(new YT.Player(video, playerOptions));
  }

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

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

  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 defaultOptions = defaults.playerOptions;
    const preferred = optionParams.reduce(paramInOptions, {});
    const playerOptions = Object.assign({}, defaultOptions, preferred);
    // settings should now only consist of playerVars
    const defaultPlayerVars = defaultOptions.playerVars;
    const playerVars = Object.assign({}, defaultPlayerVars, 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);
  }

  function init(playerOptions) {
    Object.assign(defaults.playerOptions, playerOptions);
  }

  return {
    add: addPlayer,
    init
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelectorAll(".playa");
  cover.forEach(function (cover) {
    const wrapper = cover.nextElementSibling;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);

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

(function initCover() {

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

  const covers = document.querySelectorAll(".playa");
  covers.forEach(function (cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());

Answer 1

您只需在 makeManagePlayer 内的 playerVars 中添加 autoplay: 1，点击蓝色按钮后它会自动播放视频。从这里获取参考（参见 https://developers.google.com/youtube/player_parameters?csw=1#autoplay）

点击图片后 YouTube 不播放

YouTube not playing after image click

javascript

youtube

youtube-api