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

Question

我在这里和整个网络中搜索了一种在模式窗口关闭时停止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>

我在这里想念什么？

Answer 1

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

$("#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>

我使用一种引导程序模态进行了测试，但尚未对此进行测试。

希望能帮助到你。