模态关闭时停止视频答案

【问题标题】：Stop video when modal is closed模态关闭时停止视频
【发布时间】：2016-10-03 18:00:31
【问题描述】：

我正在尝试阻止模式中的视频在它们关闭时播放。问题是我的模态脚本将模态从其原始位置移动到关闭</body> 标记之前。因此，从技术上讲，在模态窗口上方停止视频脚本，在模态窗口关闭后视频永远不会停止播放。

这是我使用的模态脚本https://github.com/VodkaBears/Remodal

JQUERY 停止视频

  var stopVideo = function ( element ) {
      var video = element.querySelector( 'video' ); // script stops here with this error message: (index):684 Uncaught TypeError: Cannot read property 'querySelector' of null.
      if ( video !== null ) {
          video.stop();
      }
  };

  $('.remodal-close').click(function(){
    var id = this.id || this.getAttribute( 'data-remodal-id' );
    var modal = document.querySelector( id );
    //closePopup();
    console.log("has video stopped? 1"); 
    stopVideo( modal );
    console.log("has video stopped? 2"); 
  });

模态的HTML

<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
    <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
      <div class="video-container clearfix">
          <div class="video clearfix">
              <embed width="200" height="113" src="https://www.youtube.com/embed/xxxxxxxx?autoplay=1" frameborder="0" allowfullscreen>         
          </div>
      </div>
</div>

【问题讨论】：

标签： jquery video jquery-selectors popup pause

【解决方案1】：

在单击modal-close-button 时触发对Video stop button 的单击以停止它。这只是一个示例，因此请根据需要进行调整。

$("#modal-close-button").click(function () {
  
  $("#video-stop-button").click(); 
  
  });


$("#video-stop-button").click(function () {
  
alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");
  
  });

div {
  
  cursor: pointer;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>






<div id="modal-close-button"> Modal close button</div>

<div id="video-stop-button"></div>

【讨论】：

【解决方案2】：

我的猜测是您无法停止视频，因为它在 iframe 中运行。你可以试试这个（注意我使用的是 iframe 标签而不是 embed 标签）：

http://jsfiddle.net/sb6rtxaz/

function toggleVideo(e, state) {
  var div = $(e.target)[0];
  var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
  div.style.display = state == 'hide' ? 'none' : '';
  func = state == 'hide' ? 'pauseVideo' : 'playVideo';
  iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}

$(document).on('opening', '.remodal', function(e) {
  toggleVideo(e);
});

$(document).on('closing', '.remodal', function(e) {
  toggleVideo(e, 'hide');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal-default-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal.min.js"></script>


<a href="#modal">Call the modal with data-remodal-id="modal"</a>

<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
  <div class="video-container clearfix">
    <div class="video clearfix">
      <iframe width="500" height="315" src="http://www.youtube.com/embed/i1EG-MKy4so?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

我的回答灵感来自Rob W的回答

您可以在他们的Github Page 上找到有关 remodal.js 事件的更多信息

【讨论】：