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

【问题标题】：How to the stop the video playing background of a popup video even after closing即使关闭后如何停止弹出视频的视频播放背景
【发布时间】：2019-05-09 02:19:48
【问题描述】：

我使用 jquery 单击按钮创建了一个视频弹出窗口。问题是即使通过单击关闭（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");
 });

【问题讨论】：

点击关闭按钮暂停视频$('#framevideo').get(0).pause()
请看这里的代码jsbin.com/vuyidilofe/edit?html,js,output

标签： jquery html css

【解决方案1】：

在 jquery 代码中进行此更改。

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

【讨论】：

请解释解决方案。

【解决方案2】：

您需要在关闭弹出窗口之前或期间暂停视频。 https://stackoverflow.com/a/22156790/20126 或停止它：

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

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

【讨论】：