通过api和Jquery事件显示/隐藏模态时，启动/停止youtube iframe [英] Start/stop youtube iframe when modal is shown/hidden through the api and Jquery events

问题描述

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

This is a bit of a repost, but none of the accepted answer uses the api in conjunction with JQuery events, if the do then the answer is incomplete. Past answer: Twitter Bootstrap Modal stop Youtube video

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

I wonder how to to get a Youtube Iframe to start playing automatically, when a bootstrap modal is opened through a link. The video should stop playing when the modal is dismissed. I looked at many of the answers, but none shows me a next to complete answer. So how do you use JQuery events from bootstrap (show.bs.modal/hide.bs.modal) to start/stop the video? The following code works in Firefox if I press play on the video when the page(modal) first loads, then dismiss the modal and reopen it. This does not work in Safari or Chrome.

我查看了文档，但仍无法使其正常工作： https://developers.google.com/youtube/iframe_api_reference

I looked at the documentation but can´t still get it to work: https://developers.google.com/youtube/iframe_api_reference

这是我的码！
html：

here is my code! 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：

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();
});
}

推荐答案

你是从HTML中的iframe。我认为您需要用id player 的div替换它，然后在 onYouTubeIframeAPIReady 。像这样：

You're starting with the iframe in your HTML. I think you need to replace that with a div with id player, then specify the videoID when you instantiate the player object in onYouTubeIframeAPIReady. Like this:

<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，我从 player_api tag.src >到 iframe_api 。

Also, there were some other minor errors, like you needed some pound signs for the video_modal id, and I changed tag.src from player_api to iframe_api.

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

Posted full JS, as there were a few other minor errors.

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

Edit^2: So I think that onYouTubeIframeAPIReady's onReady event doesn't even fire until the video is visible (which happens as a result of show.bs.modal). So the first time onPlayerReady is called, show.bs.modal has already fired, and only after that does jQuery register the show.bs.modal event. I changed the code above to register your modal shown/hidden events right from document ready, and if the playVideo method doesn't exist yet, it will try again a little later. It's kind of hacky, but I'm sure you can improve on it.

我不确定这是否有太多意义，所以这里有各种各样的图表发生了什么：

I'm not sure if that made too much sense, so here's a diagram of sorts of what was happening:

click modal button -> shown.bs.modal fires -> player onReady fires -> calls onYouTubeIframeAPIReady -> register event listener for shown.bs.modal to play video

这篇关于通过api和Jquery事件显示/隐藏模态时，启动/停止youtube iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！