当模态关闭时停止video

我正试图在关闭时停止播放模态中的video。 问题是我的模态脚本将模态从其原始位置移动到结束标记之前。 因此，在模态窗口上方停止video脚本时，video在模态关闭后永远不会停止播放。

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

JQUERY停止video

  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 for MODAL

Answer 1

单击Video stop button以在单击modal-close-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; } 

  
 Modal close button
 
 

Answer 2

我的猜测是你停止video有麻烦，因为它在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'); }); 

     Call the modal with data-remodal-id="modal"