1

モーダルのビデオが閉じられたときに再生されないようにしようとしています。</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>
4

2 に答える 2

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

于 2016-06-03T16:21:05.867 に答える
0

私の推測では、動画が iframe で実行されているため、動画を停止するのに問題があると思われます。これを試すことができます (embed タグの代わりに iframe タグを使用していることに注意してください):

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からの答えに触発されています

remodal.js イベントの詳細については、Github ページを参照してください。

于 2016-06-23T04:00:16.903 に答える