use*_*836 48 javascript modal-dialog html5-video
我在模态窗口上有一个html5视频元素.当我关闭窗口时,视频继续播放.我是JS的新手.有一种简单的方法可以将视频播放停止功能与窗口关闭按钮联系起来吗？以下是我的html页面:
<!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>
任何输入都非常感谢.
谢谢.
小智 46
我在互联网上搜索了这个问题的答案.除了这段代码,没有人能为我工作.保证.它工作得很好.
$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
way*_*vin 39
我正在使用以下技巧来停止HTML5视频.暂停()关于模态关闭的视频并设置currentTime = 0;
<script>
var video = document.getElementById("myVideoPlayer");
function stopVideo(){
video.pause();
video.currentTime = 0;
}
</script>
现在您可以使用stopVideo()方法来停止HTML5视频.喜欢,
$("#stop").on('click', function(){
stopVideo();
});
Sim*_*mon 35
我不确定ZohoGorganzola的解决方案是否正确; 但是,您可能想尝试直接获取元素,而不是尝试在jQuery集合上调用方法,而不是
$("#videoContainer").pause();
尝试
$("#videoContainer")[0].pause();
小智 8
当您关闭视频时,您只需要暂停它.
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer").pause();
return false;
});
<video id="videoContainer" width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
小智 5
试试：
function stop(){
var video = document.getElementById("video");
video.load();
}