单击 "X" 按钮时如何关闭弹出窗口并停止播放视频

Question

干杯伙计们，我会从一开始就提到我是这个世界的新手，我希望您能就以下问题提供一些帮助：

我有一个按钮。单击时，按钮会打开一个弹出窗口并自动播放位于弹出窗口内的视频。我想要做的是：

当用户单击按钮时，将触发弹出窗口并自动播放视频。当用户单击关闭“X”按钮时，弹出窗口应关闭，视频应 stop/pause.

我有以下代码：

HTML

          <div class="video-button-container">
            <img src="media/video-bg.png">
            <a href="#" onclick="toggle();">
              <img src="media/play.png" class="play">
            </a>
          </div>

          <div class="video-container">
            <img src="media/close.png" class="close" onclick="close();">
            <video src="media/video.mp4" controls="true" class="video"></video>
          </div>

CSS

.video-button-container {
  position: absolute;
  top: 70px;
  right: 70px;
}

.play {
  position: absolute;
  top: 25%;
  right: 35%;
}

.video-container {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
}

.video-container.active {
  visibility: visible;
  opacity: 1;
}

.video-container video {
  position: relative;
  max-width: 900px;
  outline: none;
}

.close {
  position: absolute;
  top: 80px;
  right: 20px;
  cursor: pointer;
  max-width: 32px;
}

@media (max-width: 991px) {
  .video-container video {
    max-width: 90%;
  }
}

JS

      var videoElem = document.querySelector(".video-container video");
      var trailerElem = document.querySelector(".video-container")

      function toggle() {
        trailerElem.classList.add("active");
        videoElem.play();
        videoElem.currentTime = 0;
      }

      function close() {
        trailerElem.classList.remove("active");
        videoElem.pause();
        videoElem.currentTime = 0;
      }

有人可以告诉我，我做错了什么吗？祝你有美好的一天！

Answer 1

我知道如果您在外部 window 中制作视频，您可以关闭 window 本身，这可以方便地调整 window 的大小等等。这意味着您可以检测到按钮何时被按下，您可以触发它关闭 window 并执行 x。（我意识到你已经做到了）

我知道您可以使用 window.close() 关闭弹出窗口，所以这里有一个部分示例：

var popup;
function onReadyFunc() {
popup = window.open("https://google.com", "_blank", "top=500,left=500,width=400,height=400");
}

function closePopup() {
popup.close()
}

并且您会在主页加载时调用 onReadyFunc() 否则您可能必须在视频顶部制作一个按钮，以便在您单击它时不太确定是否可以检测到外部按钮，但如果您有访问更改 class/id 然后你肯定可以在单击时添加一个事件来执行你的功能以关闭 window 等等。

Answer 2

close.png 元素没有绑定任何事件，因为它不在加载页面时 visible，因此您必须在加载后绑定事件。

      /* function close() {
        trailerElem.classList.remove("active");
        videoElem.pause();
        videoElem.currentTime = 0;
      }
      */
      window.onload = function () {
        document.getElementsByClassName("close")[0]
          .addEventListener("click", function (e) {
            trailerElem.classList.remove("active");
            videoElem.pause();
            videoElem.currentTime = 0;
          });
      };

单击 "X" 按钮时如何关闭弹出窗口并停止播放视频

How to close popup and stop video when clicking "X" button

html

javascript

css

jquery

popup