Question

我将Vimeo嵌入到模态中。当我点击“关闭”时，它会停止播放视频。按钮。但是当我点击模型时，它不会停止播放视频（导致模式关闭，视频在后台播放）。

我从类似的问题中尝试了一些答案，似乎无法让它们为我工作。我对JS很新，所以对任何帮助表示赞赏。

那么，只要模态关闭（无论是通过点击关闭还是通过关闭按钮），我将如何停止视频？

＆＃13;

autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-theVideo"),
      videoSRCauto = videoSRC + "?autoplay=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function() {
      $(theModal + ' iframe').attr('src', videoSRC);
    });
  });
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-5">
  <a href="#" class="btn-gs btn-gs-white btn-gs-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="https://player.vimeo.com/video/118446482" id="video">
    <i class="fa fa-video-camera"></i> Intro Video
  </a>
  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div>
            <iframe width="100%" height="350" src=""></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

不要检查何时单击模态关闭按钮，而是使用hide.bs.modal事件。工作解决方案

＆＃13;

(function(){
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-theVideo"),
      videoSRCauto = videoSRC + "?autoplay=1";
	  
    $(theModal + ' iframe').attr('src', videoSRCauto);
	  	  
	$(theModal).on('hidden.bs.modal', function (e) {
		$(theModal + ' iframe').attr('src', videoSRC);
	});	  
	  
  });
}())

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="col-md-5">
  <a href="#" class="btn-gs btn-gs-white btn-gs-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="https://player.vimeo.com/video/118446482" id="video">
    <i class="fa fa-video-camera"></i> Intro Video
  </a>
  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div>
            <iframe width="100%" height="350" src=""></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

如何在关闭模态时停止Vimeo播放

1 个答案: