模态关闭时停止视频 [英] Stop video when modal is closed

问题描述

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

I'm trying to stop videos in modals from playing when they have been closed. The problem is that my modal script moves the modal from its original place to just before the closing </body> tag. So with stop video script technically above the modal window the video never stop playing after modal is closed.

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

Here's the modal script i use https://github.com/VodkaBears/Remodal

停止视频的查询

  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

HTML FOR MODAL

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

推荐答案

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

Trigger a click on the Video stop button to stop it when the modal-close-button is clicked. This is just an example, so adjust as necessary.

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

这篇关于模态关闭时停止视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！