单击X按钮后如何停止视频答案

【问题标题】：How to stop video after X button is clicked单击X按钮后如何停止视频
【发布时间】：2021-11-17 22:14:54
【问题描述】：

目前，该视频在代码中没有player.stopVideo();。

重现：单击 1 个 svg 播放按钮，然后单击 X，您会看到。

如何在代码中修复该问题，以便在单击 X 后相同的视频停止播放？

更新代码：

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

此外，自动播放在 JSitor 中工作：https://jsitor.com/qYKcpdB0tj

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

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

【问题讨论】：

添加这个 stopPlaying 函数并在 exitHandler 中调用它：function stopPlaying() { var iframes = document.querySelectorAll('iframe'); Array.prototype.forEach.call(iframes, iframe => { iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'stopVideo' }), '*'); }); } 在这里查看：jsfiddle.net/nhovfpa6/1
再次点击相同的 svg 播放按钮后，视频无法自行播放。那是怎么固定的？见这里：jsitor.com/5wzu-E-W9w
我已经尝试了很多方法 mate ，但它似乎无法满足您的需要。这就是我所能做的：/我可以把我的评论作为答案，这样你就可以接受它作为答案吗？

标签： javascript youtube youtube-api

【解决方案1】：

你需要做的如下：

向您的 iframe 元素添加一个 ID，如下所示：id="iframe"
从createStopHandler函数中删除player.stopVideo();
在您的createStopHandler 函数中，添加以下代码（如果您希望视频停止而不是暂停，请将 func sn-p "func":"pauseVideo" 更改为 "func":"stopVideo"）：

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

应该这样做。在这里你可以看到它的工作：https://jsfiddle.net/vjbex6t1/8/

【讨论】：

【解决方案2】：

 function addClickToHome(goHome) {
    goHome.forEach(function addEventHandler(goHome) {
        goHome.addEventListener("click", homeClickHandler);
       //STOP PLAYER AFTER HOME IS CLICKED 
    });
}

使用播放器全局初始化一些变量，并在按下主页按钮时停止它

【讨论】：

请给我 2 分钟

【解决方案3】：

你可以试试这个，

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

【讨论】：