如何在模式窗口关闭时使用 HTML5 停止为视频

How do I stop as a video using HTML5 on close of Modal Window?

本文关键字：HTML5 视频 模式 窗口      更新时间：2023-09-26

我已经在这里和整个网络上搜索了一种在模式窗口关闭时停止HTML5视频的方法。虽然有很多答案似乎都不适合我的网站我的网站中的页面

<script>
 ("#bone").on('click', function(){
stopVideo();
});
</script>

<a class="button" href="#openModal">Watch Bad to the Bone</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close"  title="close" class="close" data-dismiss="modal"     aria-hidden="true" id="videoToggleOff">C</a>
<video id="bone" src="http://gluedesign.com/work/newgluetwo/video/b2b_7_15a.m4v"  controls width="960" height="540"></video>
<p class="fineprint">Bad To The Bone.</p>
</div>

我在这里错过了什么？

暂停/停止视频的一种方法是这样做：

$("#close").on("click",function(){
  $("#bone").get(0).pause(); // $("#bone").trigger('pause');
});

要在单击打开模式按钮后播放视频：

$("#openModalBtn").on("click",function(){
  $("#bone").get(0).play(); // $("#bone").trigger('play');
});

对于纯 javascript，您需要这样做：

var bone = document.getElementById("bone");
var close = document.getElementById("close");
var openModalBtn = document.getElementById("openModalBtn");
close.addEventListener("click",function(){
  bone.pause();
});
openModalBtn.addEventListener("click",function(){
  bone.play();
});

html部分也很少有错误，您可能需要将它们更正为：

<a id="openModalBtn" class="button" href="#openModal">Watch Bad to the Bone</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close"  title="close" class="close" data-dismiss="modal"     aria-hidden="true" id="close">C</a>
<video id="bone" controls width="960" height="540">
  <source src="http://gluedesign.com/work/newgluetwo/video/b2b_7_15a.m4v">
</video>
<p class="fineprint">Bad To The Bone.</p>
</div>

我使用引导模式对此进行了测试，但尚未对此进行测试。

希望对您有所帮助。

相关文章：