关闭 Modal 时停止播放 youtube 视频

Question

我正在尝试使用 Bootstrap 的模式在我正在处理的网站上播放 YouTube 视频，但我遇到了一个问题。我从这里阅读提示：Bootstrap 3 and youtube in Modal

唯一对我来说效果不错的是：

但问题是，当我在播放视频时点击模态框外关闭它时，视频并没有停止，所以我仍然可以在后台听到它。我尝试搜索答案：google、youtube、Whosebug，但没有任何效果。

我一直在阅读使用hidden.bs.modal。我已经搜索和搜索并使用它，但它仍然在后台播放。这是我的代码：

HTML:

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">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>

JS文件：

  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);
      });
    $("#videoModal").on('hidden.bs.modal', function (e) {
    $("#videoModal iframe").attr("src", $("#videoModal iframe").attr("src"));
});
  });}

我添加了我在那个页面的一个答案中找到的 hidden.bs.modal 代码，但它似乎不起作用。你介意帮帮我吗？

非常感谢，我会很感激我得到的每一个帮助！

蒂娜

Answer 1

看看这个 fiddle。

我使用了 YouTube IFrame API，只需几行代码即可轻松启动和停止视频。 fiddle 当前在模式打开后开始播放视频，并在模式关闭后立即停止。

var player;

function loadVideo() {
    player = new YT.Player('player', {
        width: '100%',
        videoId: 'loFtozxZG0s',
    });
}

$('#myModal').on('hide.bs.modal', function (e) {
    player.stopVideo();
});

$('#myModal').on('shown.bs.modal', function (e) {
    player.playVideo();
});

loadVideo 函数在 #player div 中创建了一个新的 YouTube 播放器。这里是设置视频的地方，videoId.

下一个函数停止 hide.bs.modal 上的视频，一旦模式开始关闭就会触发。

最后一个函数在 shown.bs.modal 上启动视频，在显示模式后触发。

您可以找到有关 YouTube IFrame 的更多信息API here。

希望这有效，

图格兹里达。

Answer 2

这对我有用：

<script>
    //function to get and autoplay 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+"?rel=0&amp;autoplay=1" ;
            $(theModal+' iframe').attr('src', videoSRCauto);
            $(theModal+' button.close').click(function () {
                $(theModal+' iframe').attr('src', videoSRC);
            });
            $(theModal).on('hide.bs.modal', function (e) {
    $(theModal+' iframe').attr('src', videoSRC);
});
        });
    }
    //the function call:
            $(document).ready(function(){
                autoPlayYouTubeModal();
            });
            </script>

我补充了：

$(theModal).on('hide.bs.modal', function (e) {
    $(theModal+' iframe').attr('src', videoSRC);
});

关闭 Modal 时停止播放 youtube 视频

Stopping a youtube video when Modal is closed

youtube

modal-dialog

playing

twitter-bootstrap