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

【问题标题】：Javascript to stop HTML5 video playback on modal window closeJavascript 在模态窗口关闭时停止 HTML5 视频播放
【发布时间】：2011-08-22 22:08:01
【问题描述】：

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

非常感谢任何输入。

谢谢。

【问题讨论】：

标签： javascript modal-dialog html5-video

【解决方案1】：

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

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

现在您可以使用 stopVideo() 方法停止 HTML5 视频。喜欢，

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

【讨论】：

这是正确答案。其他答案暂停播放而不是停止播放。谢谢！
我试过这个，但它对我不起作用。它看起来是正确的，但它不会暂停或停止视频。
@RolandiXor 你能告诉我们你的代码 sn-p 吗？通过“它不会暂停或停止视频”这句话，看起来您有多个视频。如果您不小心为所有视频标签提供了相同的 ID，您可能无法获得所需的功能。
@way2vin 我使用了不同的 ID，但这种方法不起作用。你上面的那个。顺便说一句，您的方法需要 jquery 吗？我问是因为我注意到您使用的是“$”。
@RolandiXor 是的，在我的示例中，我使用了 jquery。您可以为此目的使用纯javascript并不重要。

【解决方案2】：

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

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

【讨论】：

$('video').trigger('pause');是我走的路！完美运行！
这是对我有用的那个，但我相信它可能需要 jquery（我正在使用它是因为引导程序），所以你可能想提一下。
如果您使用$('video').get(0).load();，它也会停止播放并正常工作
非常感谢，这是唯一的解决方案..
非常感谢。这很有帮助:)

【解决方案3】：

我不确定 ZohoGorganzola 的解决方案是否正确；但是，您可能想尝试直接获取元素，而不是尝试调用 jQuery 集合上的方法，所以不要使用

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

试试

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

【讨论】：

谢谢它帮助了我。第二个对我有用。 [0] 是方法的重要部分 :)))
对于任何人都可以在这里找到自己的方式，这在代码中有效，但由于某种原因它不在控制台中（至少不是来自 Chrome）。如果您在测试时遇到错误，请在您的实际代码中尝试一下，它应该可以工作。

【解决方案4】：

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

$("#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 documentation for scripting video controls。

【讨论】：

【解决方案5】：

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

【讨论】：

你在 iPad 上测试过吗？好像当您弹出模式备份时，视频似乎没有再次加载。
好的，这个解决方案有效.. 确保将 [0] 放入方法中.. 否则它不会停止视频。谢谢
@Carlos 您是否为您的评论找到了解决方案？我遇到了同样的错误
@climboid，由于这个问题，我们实际上不得不采用不同的解决方案（VideoJS）。现在可能对 HTML5 视频和 Modal 有更好的支持，想想如果它还在发生，可能不会。
@climboid，我的解决方案是针对 Video JS 和 iPad 解决方案的 JS fiddle。 jsfiddle.net/UGS2U/1

【解决方案6】：

试一试：

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

【讨论】：

为什么 OP 应该使用这个代码？你能用解释来扩展你的答案吗？
来自 google dev: "注意：调用 video.pause() 不是中断视频的唯一方法。您可以使用 video.load( ) 和 video.src..." (developers.google.com/web/updates/2017/06/…)

【解决方案7】：

试试这个：

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

【讨论】：

【解决方案8】：

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

var videos = $("object");

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

注意 Stop() 上的非标准大写“S”；

【讨论】：

【解决方案9】：

使用 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 文档。

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

// 模态

youtube 播放器 //要么 // modal

视频播放器

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

【讨论】：

这个答案似乎没有解决问题中的任何问题，也不清楚它一般试图传达什么。目的是什么？ sn-p 应该做什么？为什么以及如何与问题相关？