Youtube iframe API：OnReady 未触发 Chrome 扩展答案

【问题标题】：Youtube iframe API: OnReady not firing for Chrome extensionYoutube iframe API：OnReady 未触发 Chrome 扩展
【发布时间】：2014-02-13 15:11:57
【问题描述】：

我正在尝试构建一个 Chrome 扩展程序以使用 Youtube 的 iframe API 显示 Youtube 视频。但是，玩家的 OnReady 事件永远不会触发。从这里以前的帖子中，我认为这是由于 Youtube 无法访问播放器，因为它是本地实例化。

我想知道：有没有办法让它工作？

我的代码在弹出窗口中实例化播放器。我想通过将视频 ID 传递给播放器的 loadVideoById 函数来向播放器播放新视频。这是我的播放器的代码（在一个名为“youtube.js”的文件中）：

function loadPlayer() {
var popups = chrome.extension.getViews({type: "popup"});
if (popups.length != 0) {
    var popup = popups[0];
    console.log("Popup found, starting to load the player...");
    var tag = popup.document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = popup.document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    console.log("Finished loading the player.");
    }
}

onYouTubeIframeAPIReady 函数如下：

function onYouTubeIframeAPIReady() {
    console.log("Starting to instantiate the player...");
    var popups = chrome.extension.getViews({type: "popup"});
    if (popups.length != 0) {
        var popup = popups[0];
        popup.document.ytplayer = new YT.Player('player', {
            height: '200',
            width: '300',
            videoId: 'V4n6OjoPuJc',
            playerVars: {
                origin: 'location.origin',
                showinfo: 0,
                controls: 1,
                playsinline: 1,
                autoplay: 0
            },
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        })
    };
    console.log("Player element created.");
    console.log(popup.document.ytplayer);
}

popup.html 文件有一个播放器的 div：

<div id="player"></div>

玩家应该有足够的权利。 manifest.json 文件中包含的安全策略：

"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vfldKI4RW.js https://s.ytimg.com/yts/jsbin/www-widgetapi-vflgGL-5Q.js; object-src 'self'",

播放器实例化很好，并且能够播放我硬编码的初始 videoId。但是，玩家的 OnReady 事件似乎没有触发。此外，对于创建的播放器，API 的大部分功能都无法使用（即，如果我尝试传递新的 videoId，则返回诸如“TypeError：Object # has no method 'loadVideoById'”之类的错误）。从之前的帖子中，我了解到这些问题有一个相同的根源：Youtube 无法与我的播放器通信，因为它没有关联的域。

有没有办法做到这一点？如果是这样，我做错了什么？非常感谢！

有几个相关的帖子可用；但是，这些是 web html 播放器，它们确实有自己的域（如果这是表达它的正确方式），Chrome 扩展程序并非如此。 YouTube API onPlayerReady not firing Youtube Embed Iframe - Events Not Firing In Local

还有另一个相关的帖子，但这并没有针对这个特定问题提出问题。 Youtube API player chrome extension

【问题讨论】：

标签： javascript iframe google-chrome-extension youtube

【解决方案1】：

我认为目前没有办法解决这个问题，但我想我会与其他人分享我的解决方案。我认为这可能是最强大的解决方法 atm：

<div id="dummyTarget"></div>
<iframe id="youtube-player" frameborder="0" allowfullscreen="1" title="YouTube player" width="640" height="360"></iframe>

//  Call this once to get the appropriate http or https. Can't do this all in one call due to a bug in YouTube's API:https://code.google.com/p/gdata-issues/issues/detail?id=5670&q=onReady&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary
new window.YT.Player('dummyTarget');
var isHttps = $('#dummyTarget').attr('src').indexOf('https') !== -1;
$('#dummyTarget').remove();

var url = isHttps ? 'https' : 'http';
url += '://www.youtube.com/embed/?enablejsapi=1&origin=chrome-extension:\\\\{EXTENSION-ID}';
$('#youtube-player').attr('src', url);

我更喜欢这种实现方式，因为它允许您在创建 iframe 时准确地确定是使用 http 还是 https。这很重要，因为某些客户端可能无法仅使用 http 或 https，而 YouTube 的 API 能够智能地确定这一点。首先将 API 应用于 dummyTarget 可以让我们利用这种智能。

【讨论】：

您能解释一下您的解决方案如何应用在这里吗？
YouTube 在其 API 中没有适当支持“origin=chrome-extension”。如果您不提供来源，则 OnReady 不会触发。这是一个不错的解决方法，但我认为我目前没有使用它。我最初只是用它构建了一个 iframe，请参见此处：github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/…
@SeanAnderson 这是否意味着您没有使用 IFrame API 控制播放器？如果是，你是如何控制它的？
此解决方案已过时。我不再需要这样做——我只需构建一个 iframe 并按预期进行设置，是的，我正在使用 IFrame API 来控制它。

【解决方案2】：

这似乎是由于 Youtube Iframe API 中的错误。如果您将 youtube 播放器的 origin 参数设置为

，则不会触发事件

"chrome-extension://[extension-id]"

您必须将斜杠更改为如下所示的反斜杠

"chrome-extension:\\[extension-id]"

我已将此问题报告给 google 群组。

https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=5670

【讨论】：