Question

我在这里和网上搜索了一种方法来停止关闭模态窗口的HTML5视频。虽然有很多答案似乎对我的网站没有用 The page from my site

<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>

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

希望它有所帮助。

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

1 个答案: