模态关闭时停止 youtube 视频

Posted

技术标签:

【中文标题】模态关闭时停止 youtube 视频【英文标题】:Stopping a youtube video when Modal is closed 【发布时间】:2015-08-06 06:28:36 【问题描述】:

我正在尝试使用 Bootstrap 的 Modal 在我正在开发的网站上播放 youtube 视频,但我遇到了一个问题。我从这里阅读提示:Bootstrap 3 and youtube in Modal

唯一对我来说效果很好的是:

Jeremy Kenedy Fiddle

但问题是,当我在播放视频时单击模态框外部将其关闭时,视频不会停止,所以我仍然可以在后台听到它。我尝试搜索答案:google、youtube、***,但没有任何效果。

我一直在阅读以使用 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   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 代码,但它似乎不起作用。你介意帮帮我吗?

非常感谢你,我会感谢我得到的每一个帮助!

蒂娜

【问题讨论】:

【参考方案1】:

看看这个fiddle。

我使用了 YouTube IFrame API,只需几行代码即可轻松启动和停止视频。小提琴当前在模态打开后启动视频,并在模态关闭后立即停止。

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 的更多信息。

希望这行得通,

图格兹里达。

【讨论】:

嗨@Tina,如果这个或任何答案解决了您的问题,请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案,并为回答者和您自己提供了一些声誉。没有义务这样做。【参考方案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);
);

【讨论】:

以上是关于模态关闭时停止 youtube 视频的主要内容,如果未能解决你的问题,请参考以下文章

使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?

关闭手风琴 div 时停止播放 YouTube 视频 [重复]

html 关闭Modal(BootStrap)时停止Youtube视频

弹出窗口关闭时停止 youtube 视频 [重复]

Bootstrap 模式关闭时 Youtube 视频仍在播放

youtube 视频在按钮单击时自动播放