用于在模式窗口关闭时停止 HTML5 视频播放的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5958132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript to stop HTML5 video playback on modal window close
提问by user747836
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:
我在模态窗口上有一个 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>
Any input greatly appreciated.
任何输入都非常感谢。
Thanks.
谢谢。
回答by user3376436
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');
});
回答by way2vin
I'm using the following trick to stop HTML5 video. pause() the video on modal close and set currentTime = 0;
我正在使用以下技巧来停止 HTML5 视频。pause() 模式关闭时的视频并设置 currentTime = 0;
<script>
var video = document.getElementById("myVideoPlayer");
function stopVideo(){
video.pause();
video.currentTime = 0;
}
</script>
Now you can use stopVideo() method to stop HTML5 video. Like,
现在您可以使用 stopVideo() 方法来停止 HTML5 视频。喜欢，
$("#stop").on('click', function(){
stopVideo();
});
回答by Simon
I'm not sure whether ZohoGorganzola's solution is correct; however, you may want to try getting at the element directly rather than trying to invoke a method on the jQuery collection, so instead of
我不确定 ZohoGorganzola 的解决方案是否正确；但是，您可能想尝试直接获取元素，而不是尝试调用 jQuery 集合上的方法，而不是
$("#videoContainer").pause();
try
尝试
$("#videoContainer")[0].pause();
回答by Tom Chandler
When you close the video you just need to pause it.
当您关闭视频时，您只需要暂停它。
$("#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>
Also, for reference, here's the Opera documentation for scripting video controls.
此外，作为参考，这里是 Opera脚本视频控件文档。
回答by Yana Lazer
The right answer is : $("#videoContainer")[0].pause();
正确答案是： $("#videoContainer")[0].pause();
回答by Guilherme Ferreira
Have a try:
试试：
function stop(){
var video = document.getElementById("video");
video.load();
}回答by Alan Bellows
For anyone struggling with this issue with videos embedded using the <object>tag, the function you want is Quicktime's element.Stop();For example, to stop any and all playing movies, use:
对于使用<object>标签嵌入视频的任何人来说，您想要的功能是 Quicktime 的element.Stop();例如，要停止任何和所有播放电影，请使用：
var videos = $("object");
for (var i=0; i < videos.length; i++)
{
if (videos[i].Stop) { videos[i].Stop(); }
}
Note the non-standard capital "S" on Stop();
注意Stop()上的非标准大写“S”；
回答by mikematinao
Try this:
尝试这个：
$(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;
});
});
回答by rosap
I managed to stop the video using "get(0)" (Retrieve the DOM elements matched by the jQuery object):
我设法使用“get(0)”（检索与 jQuery 对象匹配的 DOM 元素）停止视频：
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer").get(0).pause();
return false;
});
回答by pjammer
None of these worked for me using 4.1 video.js CDN. This code kills the video playing in a modal when the (.closemodal) is clicked. I had 3 videos. Someone else can refactor.
这些都不适合我使用 4.1 video.js CDN。.closemodal单击( )时，此代码将终止以模式播放的视频。我有3个视频。其他人可以重构。
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();
});
});
as per their Apidocs.
根据他们的Api文档。
