javascript - 单击 X 按钮后如何停止视频

Question

目前视频没有player.stopVideo();代码。

重现:点击 1 svg play 按钮，然后点击 X，您将看到它。

如何在代码中修复此问题，以便同一视频在单击 X 后停止？

更新代码:

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

此外，自动播放在 JSitor 中有效:https://jsitor.com/qYKcpdB0tj

备份副本:https://jsfiddle.net/0q63tr2m/

const videoPlayer = (function makeVideoPlayer() {
  const players = [];

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

  function addPlayer(video, settings) {
    const defaults = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    defaults.events = {
      "onReady": onPlayerReady
    };

您可以在此处看到仍在播放的视频:

Answer 1

你要做的事情如下:

1. 像这样向您的 iframe 元素添加一个 id:id="iframe"
2. 从 createStopHandler 函数中移除 player.stopVideo();
3. 在您的 createStopHandler 函数中，添加以下代码(如果您希望视频停止而不是暂停，则将函数片段 "func":"pauseVideo" 更改为"func":"stopVideo"):

var frame = document.getElementById("iframe");
frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

这应该可以做到。在这里您可以看到它正在运行:https://jsfiddle.net/vjbex6t1/8/