Question

这是一个重新发布，但是没有一个接受的答案将api与JQuery事件结合使用，如果答案是不完整的话。过去的回答： Twitter Bootstrap Modal stop Youtube video

我想知道当通过链接打开引导模式时，如何让Youtube iframe自动开始播放。当模态被解除时，视频应该停止播放。我看了很多答案，但没有一个给我看下一个完整的答案。那么如何使用bootstrap（show.bs.modal / hide.bs.modal）中的JQuery事件来启动/停止视频？如果我在页面（模态）首次加载时按下视频播放，则以下代码在Firefox中有效，然后关闭模式并重新打开它。这在Safari或Chrome中无效。

我查看了文档，但仍然无法使用它：https://developers.google.com/youtube/iframe_api_reference

这是我的代码！ html：

<div class="modal fade" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/zg8KE6bEP50?version=3&rel=0&enablejsapi=1&origin=*&html5=1" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div><!--/modal fade-->

使用Javascript：

jQuery( document ).ready(function() {
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

var player;

window.onYouTubePlayerAPIReady = function() {
player = new YT.Player('player', {
  events: {
    'onReady': onPlayerReady
  }
});
}
function onPlayerReady(event) {
$("video_modal").on('shown.bs.modal', function() {
    player.playVideo();
});
$("video_modal").on('hidden.bs.modal', function() {
    player.stopVideo();
});
}

Answer 1

您从HTML中的iframe开始。我认为你需要用id为player的div替换它，然后在onYouTubeIframeAPIReady中实例化播放器对象时指定videoID。像这样：

<div class="modal fade" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div id="player"></div>
            </div>
        </div>
    </div>
</div><!--/modal fade-->

jQuery( document ).ready(function() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    jQuery("#video_modal").on('shown.bs.modal', function() {
        if(typeof player.playVideo == 'function') {
            player.playVideo();
        } else {
            var fn = function(){
                player.playVideo();
            };
            setTimeout(fn, 200);
        }
    });
    jQuery("#video_modal").on('hidden.bs.modal', function() {
        player.stopVideo();
    });
});

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: 'zg8KE6bEP50',
    });
}

此外，还有其他一些小错误，例如您需要video_modal ID的一些井号，我将tag.src从player_api更改为iframe_api。

编辑：发布完整的JS，因为还有其他一些小错误。

编辑^ 2：所以我认为 onYouTubeIframeAPIReady的{{1}}事件甚至在视频可见之前都不会触发（由于{{ 1}}）。因此，第一次调用onReady时，show.bs.modal已经触发，只有在此之后，jQuery才会注册onPlayerReady事件。我更改了上面的代码，直接从文档准备好注册你的模态显示/隐藏事件，如果playVideo方法还不存在，它会稍后再试。这有点hacky，但我相信你可以改进它。

我不确定这是否有多大意义，所以这里有各种各样的图表：

show.bs.modal

当通过api和Jquery事件显示/隐藏模态时，启动/停止youtube iframe

1 个答案: