Question

我在模态窗口上有一个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>

非常感谢任何输入。

感谢。

Answer 1

我在互联网上搜索了这个问题的答案。除了这段代码，没有人能为我工作。保证。它工作得很好。

$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});

Answer 2

我不确定ZohoGorganzola的解决方案是否正确;但是，您可能想尝试直接获取元素，而不是尝试在jQuery集合上调用方法，因此而不是

$("#videoContainer").pause();

尝试

$("#videoContainer")[0].pause();

Answer 3

我正在使用以下技巧来停止HTML5视频。暂停（）视频关闭模态关闭并设置currentTime = 0;

<script>
     var video = document.getElementById("myVideoPlayer");
     function stopVideo(){
          video.pause();
          video.currentTime = 0;
     }
</script>

现在您可以使用stopVideo（）方法停止HTML5视频。像，

$("#stop").on('click', function(){
    stopVideo();
});

Answer 4

当你关闭视频时，你只需要暂停它。

$("#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>

另外，作为参考，这里是歌剧documentation for scripting video controls。

Answer 5

正确的答案是：$("#videoContainer")[0].pause();

Answer 6

试一试：

function stop(){
    var video = document.getElementById("video");
    video.load();
}

Answer 7

使用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();
});
});

根据他们的Api文档。

Answer 8

试试这个：

$(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;                   
    });
});

Answer 9

对于使用<object>标记嵌入视频时遇到此问题的人，您想要的功能是Quicktime的element.Stop();例如，要停止播放所有电影，请使用：

var videos = $("object");

for (var i=0; i < videos.length; i++)
{
    if (videos[i].Stop) { videos[i].Stop(); }
}

注意Stop（）;

上的非标准大写“S”

Answer 10

我设法使用“ get（0）”停止了视频（检索与jQuery对象匹配的DOM元素）：

$("#closeSimple").click(function() {
    $("div#simpleModal").removeClass("show");
    $("#videoContainer").get(0).pause();
    return false;
});

Javascript在模态窗口关闭时停止HTML5视频播放

10 个答案: