我在模态窗口上有一个 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>
非常感谢任何意见。
谢谢。
我正在使用以下技巧来停止 HTML5 视频。暂停（）模式关闭视频并设置 currentTime = 0;
<script>
var video = document.getElementById("myVideoPlayer");
function stopVideo(){
video.pause();
video.currentTime = 0;
}
</script>
现在您可以使用 stopVideo() 方法来停止 HTML5 视频。就像，
$("#stop").on('click', function(){
stopVideo();
});
我在互联网上搜索了这个问题的答案。除了这段代码之外，没有一个对我有用。有保证。它工作完美。
$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
我不确定ZohoGorganzola的解决方案是否正确；但是，您可能想尝试直接获取元素，而不是尝试调用 jQuery 集合上的方法，因此不要使用
$("#videoContainer").pause();
尝试
$("#videoContainer")[0].pause();
关闭视频时，只需暂停即可。
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer")[0].pause();
return false;
});
<video id="videoContainer" width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
另外，作为参考，这里有 Opera 用于编写视频控件脚本的文档。
正确答案是：
$("#videoContainer")[0].pause();尝试一下：
function stop(){
var video = document.getElementById("video");
video.load();
}试试这个：
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
$("#videoContainer")[0].play();
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer")[0].pause();
return false;
});
});
对于任何因使用
<object>element.Stop();var videos = $("object");
for (var i=0; i < videos.length; i++)
{
if (videos[i].Stop) { videos[i].Stop(); }
}
注意 Stop() 上的非标准大写“S”；
这些对我使用 4.1 video.js CDN 都不起作用。当单击 (
.closemodal
var myPlayer = videojs("my_video_1");
var myPlayer2 = videojs("my_video_2");
var myPlayer3 = videojs("my_video_3");
$(".closemodal").click(function(){
myPlayer.pause();
myPlayer2.pause();
myPlayer3.pause();
});
});
根据他们的 Api 文档。
我设法使用“get(0)”停止视频（检索与 jQuery 对象匹配的 DOM 元素）：
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer").get(0).pause();
return false;
});
当您使用 webRtc 播放流媒体视频时，您必须从流中删除曲目并将 src 对象设置为 null。
// 模态
$('#image-modal').on('hidden.bs.modal', function () {
$("#image-modal iframe").attr("src", $("#image-modal iframe").attr("src"));
$("#image-modal video").attr("src", $("#image-modal video").attr("src"));
});