停止播放视频答案

【问题标题】：Stop the video from playing停止播放视频
【发布时间】：2017-01-04 16:45:49
【问题描述】：

我在同一页面上有两个视频，它们在 iframe 中打开。当我关闭弹出窗口时，视频不会停止。它一直在播放。由于我无法控制的情况，我必须使用 iframe 中的视频。

谁能帮忙，下面是相同的代码：

jQuery:

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");

    $popupIframe.attr("src", videoUrl);



    var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var left = left/2 - 340;

    var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var top = top/2 - 180;

    document.getElementById("vid").style.top = top + "px";
    document.getElementById("vid").style.left = left + "px"; 
    document.getElementById("vid1").style.top = top + "px";
    document.getElementById("vid1").style.left = left + "px"; 

    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});

HTML：

<div class="popup" id="media-popup"> <!-- video embedded -->
                <iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                <iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>   
                <a class="video-close" href="#0"></a>
            </div><!-- popup -->


<a id="video" data-media="//www.vimeo.com/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>

【问题讨论】：

可能重复：stackoverflow.com/questions/13598423/…
如果可能的话，我还建议您使用video 元素，而不是直接将iframe 的src 设置为视频，因为它为您提供了更多控制权 - 您将获得@987654327 @ 方法之一。
@RoryMcCrossan 你能分享一个例子吗？这可能对我有帮助。
您的弹出窗口只是页面中的一个 html 元素。以弹出窗口的形式显示或隐藏。但是隐藏它并不会从页面中删除元素，因此即使您看不到它，视频仍然会播放。您需要重置 iframe 的 url（为什么要为此使用 iframe？）
@Seb，我不得不使用它，因为另一个编码器开发了这部分代码及其庞大的数据来改变一切

标签： javascript jquery

【解决方案1】：

这对我有帮助，看看吧！ click here to go to the original answer

基本上您需要使用 iframe 或视频来启动播放器，并且该代码会在您需要时停止它。

var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
    var iframeSrc = iframe.src;
    iframe.src = iframeSrc;
}
if ( video !== null ) {
    video.pause();
}
};

【讨论】：

【解决方案2】：

要停止视频，不仅暂停，您可以将currentTime设置为0，例如：

video.pause()
video.currentTime = 0

【讨论】：

【解决方案3】：

这将“重置”每个 iframe 的 src 属性，从而停止视频。

jQuery("iframe").each(function() { 
        var url = jQuery(this).attr('src');
        jQuery(this).attr('src', url);  
});

如果 iframe 在您的域中，您也可以运行以下命令。

    jQuery('iframe').contents().find('video').each(function () 
    {
        this.pause();
    });
    jQuery('video').each(function () 
    {
        this.pause();
    });

【讨论】：

这对我没有任何作用@Bryant

【解决方案4】：

http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=preview

这个 plunker 帮助我解决了我的问题。

HTML：

<head>
    <title>Autostop Videos in Closed Modal</title>

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Autostop Videos in Closed Modal</h1>

    <ul class="nav" >
      <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
      <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
    </ul>

    <div class="modal fade" id="video1">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 1</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="video2">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 2</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

  </body>

</html>

JS：

$(function(){
  $('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
  });
});

【讨论】：