Question

我通过使用jquery单击按钮创建了一个视频弹出窗口。问题是，即使通过单击close（X）按钮关闭了视频弹出窗口，视频仍在后台付款。下面的代码可以帮助我解决此问题。

HTML：

<button class="light">Click Here</button>


    <div class="popup__overlay">
 <div id="popupVid" class="popup"><a class="popup__close" href="#">X</a><br />
<video id="framevideo" controls="controls" width="300" height="150">
    <source src="http://indivillage.in/eocares_test/wp-content/uploads/2018/12/y2mate.com-doremon_episode_mini_doremon__yziyijrh5E_360p.mp4" type="video/mp4" />
</video>
        </div>

CSS：

.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
z-index: 100;
}

.popup__overlay:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: "";
}

.popup {
 display: inline-block;
 position: relative;
 width: 100%;
 height: 100%;
 max-width: 640px;
 max-height: 480px;
 padding: 20px;


 color: white;
vertical-align: middle;
}

.popup-form__row {
margin: 1em 0;
}

.popup__close {
display: block;
 position: absolute;
top: 20px;
width: 20px;
height: 12px;
padding: 8px;
cursor: pointer;
text-align: center;
font-size: 20px;
line-height: 12px;
 color: white;
text-decoration: none;

 }

.popup__close:hover {
color: #eea200;
}

 #framevideo {
 width: 100%;
 height: 100%;
 }

JS：

   var p = jQuery(".popup__overlay");
  jQuery(document).ready(function(){
   jQuery(".light").click(function() {
   p.css("display", "block");
  });
  p.click(function(event) {
 e = event || window.event;
 if (e.target == this) {
  jQuery(p).css("display", "none");
  }
  });

 });

jQuery(".light").click(function() {
 p.css("visibility", "visible").css("opacity", "1");
 });

 p.click(function(event) {
    e = event || window.event;
  if (e.target == this) {
  jQuery(p)
  .css("visibility", "hidden")
  .css("opacity", "0");
  toggleVideo("hide");
  }
 });

  jQuery(".popup__close").click(function() {
  p.css("visibility", "hidden").css("opacity", "0");
 toggleVideo("hide");
 });

我通过使用jquery单击按钮创建了一个视频弹出窗口。问题是，即使通过单击close（X）按钮关闭了视频弹出窗口，视频仍在后台付款。下面的代码可以帮助我解决此问题。

Answer 1

在关闭弹出窗口之前或同时，您需要暂停视频。 https://stackoverflow.com/a/22156790/20126或将其停止：

function stopMedia() {
  media.pause();
  media.currentTime = 0;
}

也可能的解决方案是删除弹出窗口html的全部内容，包括视频标签，然后在打开它时再次创建它。

Answer 2

在jquery代码中进行此更改。

jQuery(".popup__close").click(function() {
p.css("visibility", "hidden").css("opacity", "0");
jQuery('#framevideo').get(0).pause()
toggleVideo("hide");
});

关闭后如何停止弹出视频的视频播放背景

2 个答案: