Question

如何停止在Twitter Bootstrap Modal关闭时播放的多个Youtube视频？

这就是我所拥有的...当我只有一个视频时它可以正常工作......

var player = document.getElementById('MjXAo2qxMlA'); //save the object or embed youtube video in a variable
$('#ttvideoModalTwo').on('hide', function () {
  player.stopVideo();
})

var player = document.getElementById('zXscUitXHPc'); //save the object or embed youtube video in a variable
$('#ttvideoModalOne').on('hide', function () {
  player.stopVideo();
})

Answer 1

我遵循了API文档，但是当我关闭模式时，我的视频无法停止。我无法得到上述答案，关闭按钮也不会做任何事情。

最终决定在这里使用答案：http://www.kolor-designs.com/personal/stop-youtube-videos-when-dismissing-the-bootstrap-modal/

它清除iframe的src。我假设他们的代码中的警报用于测试，我将其删除。

Answer 2

根据API，您可以通过$.stopVideo()功能停止播放视频，将其包含在您的modal('hide')方法中，并且您应该能够在模式关闭后停止视频，例如这样：

<强> JS

var player = document.getElementById('objectId'); //save the object or embed youtube video in a variable
$('#myModal').on('hide', function () {
  player.stopVideo();
})

Youtube API Documentation

Answer 3

这是停止视频播放的完整代码

<div class="modal fade" id="video_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <button class="close" data-dismiss="modal" type="button">×</button>
    <iframe id="ivideo_3" width="560" height="315" src="http://www.youtube.com/embed/9wiDMU-NnKU?wmode=transparent&enablejsapi=1&origin=http://<YOUR_SITE_HERE.com>" frameborder="0" ></iframe>
</div>

<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player_3;
    function onYouTubeIframeAPIReady() {
        player_3 = new YT.Player('ivideo_3');
        $('#video_3').on('hide', function () {
            player_3.stopVideo();
        });
    }
</script>

如何在Twitter Bootstrap模式关闭时停止播放Youtube视频

3 个答案: