YouTube api 事件未使用 adobe muse 触发答案

【问题标题】：YouTube api events not firing with adobe museYouTube api 事件未使用 adobe muse 触发
【发布时间】：2016-10-14 02:56:22
【问题描述】：

我的客户想要一个包含 4 个嵌入式 youtube 视频的页面，当您单击下一个视频时会暂停，因此一次只能播放一个。听起来很简单，对吧？

问题是，他想将整个网站保留在 adobe muse 中，我找到了一个小部件，可以让我轻松插入 jquery/js 代码。我正在使用this fiddle 的一个稍微修改过的版本，我在thread from 2014 上找到了它，它看起来非常有前途且稳定，但是当我将页面上传到我的网络服务器上时，它不知何故不起作用。但它在 Fiddle 中有效。

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

function onYouTubeIframeAPIReady() {
    console.log('api_ready');
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function() {
        return this.src.indexOf('http://www.youtube.com/') === 0;
    }).each(function(k, v) {
        console.log('iframes');
        var src1 = $(this).attr('src');
        $(this).attr('src', src1 + "?enablejsapi=1");
        if (!this.id) { this.id='embeddedvideoiframe' + k; }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    console.log('State_changed: ' + event.data);
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getIframe().id != event.target.getIframe().id) {
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }));
        console.log(players);
    });
}

我的控制台输出如下所示：

api_inserted
api_ready
iframes
[X]
iframes
[X, X]
iframes
[X, X, X]
iframes
[X, X, X, X]

【问题讨论】：

标签： javascript jquery youtube youtube-api html5-video

【解决方案1】：

我问了我的一个好朋友，我们解决了这个问题。

iframe 需要“enablejsapi=1”，我添加了一个“？”之前，那是错误的。只有一个“？”在视频 id 和所有其他属性之后用“&”分隔。

正确的代码是：

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

function onYouTubeIframeAPIReady() {
    console.log('api_ready');
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function() {
        return this.src.indexOf('http://www.youtube.com/') === 0;
    }).each(function(k, v) {
        console.log('iframes');
        var src1 = $(this).attr('src');
        $(this).attr('src', src1 + "&enablejsapi=1");
        if (!this.id) { this.id='embeddedvideoiframe' + k; }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    console.log('State_changed: ' + event.data);
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getIframe().id != event.target.getIframe().id) {
                                this.stopVideo();
                            }
                        });
                    }
                }
            }
        }));
        console.log(players);
    });
}

【讨论】：