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

Posted 2023-05-07

【中文标题】即使关闭后如何停止弹出视频的视频播放背景

【英文标题】：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"  >
    <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 单击按钮创建了一个视频弹出窗口。问题是即使通过单击关闭（X）按钮关闭视频弹出窗口后，视频仍在后台支付。下面是代码，请帮助我解决这个问题。

【问题讨论】：

点击关闭按钮暂停视频$('#framevideo').get(0).pause()

请看这里的代码jsbin.com/vuyidilofe/edit?html,js,output

【参考方案1】：

在 jquery 代码中进行此更改。

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

【讨论】：

请解释解决方案。

【参考方案2】：

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

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

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