Javascript在模态窗口关闭时停止HTML5视频播放 [英] Javascript to stop HTML5 video playback on modal window close
本文介绍了Javascript在模态窗口关闭时停止HTML5视频播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在模态窗口上有一个html5视频元素。当我关闭窗口时，视频继续播放。我是JS的新手。有没有简单的方法将视频播放停止功能绑定到窗口关闭按钮？以下是我的html页面：
I've got a html5 video element on a modal window. When I close the window the video continues to play. I'm a total newbie to JS. Is there an easy way to tie a video playback stop function to the window close button? Below is my html page:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Modal Test</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
return false;
});
});
</script>
<style type="text/css">
div#simpleModal
{
position:absolute;
top: 40px;
width: 320px;
left: 170px;
border: solid 1px #bbb;
padding: 20px;
background: #fff;
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
opacity: 0.0;
-webkit-transition: opacity 0.0s ease-out; z-index: 0;
}
div#simpleModal.show
{
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}
</style>
</head>
<body>
<a href="" id="showSimpleModal">Show Modal</a>
<div id="simpleModal" class="modal">
<video width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
<a href="" id="closeSimple">Close</a>
</div>
</body>
</html>
任何输入都非常感谢。
谢谢。
推荐答案
我在互联网上搜索了这个问题的答案。除了这段代码，没有人能为我工作。保证。它工作得很好。
I searched all over the internet for an answer for this question. none worked for me except this code. Guaranteed. It work perfectly.
$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
这篇关于Javascript在模态窗口关闭时停止HTML5视频播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
