Javascript Youtube iframe API:OnReady未为Chrome扩展启动

我正在尝试构建一个Chrome扩展来使用Youtube的iframe API显示Youtube视频。但是，玩家的OnReady事件从不触发。从前面的文章中我推断这是因为Youtube无法访问播放器，因为它是本地实例

我想知道：有没有办法让这一切顺利

---

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

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>

播放器实例化良好，能够播放我硬编码的初始videoId。但是，玩家的OnReady事件似乎没有触发。此外，API的大部分功能对于创建的播放器来说是不可用的（即，如果我试图传递新的VideoID，则返回错误，如“TypeError:Object”没有方法“loadVideoById”）。从以前的帖子中，我发现这些问题有一个相同的根源：Youtube无法与我的播放器通信，因为它没有相关的域

有办法做到这一点吗？如果是，我做错了什么？事先非常感谢

---

有几个相关的职位；但是，这些web html播放器有自己的域（如果这是正确的表达方式），而Chrome扩展则不是这样。

还有另外一个相关的帖子，但这并不是这个特定问题的问题。

---

我认为现在没有办法解决这个问题，但我想我应该与其他人分享我的解决方案。我认为这可能是最可靠的解决办法：

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

//调用此函数一次以获取适当的http或https。由于YouTube API中存在错误，无法在一次调用中完成此操作：https://code.google.com/p/gdata-issues/issues/detail?id=5670&q=onReady&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary
新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-ID}'；
$（'youtube播放器'）.attr（'src'，url）；

---

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

这似乎是由于Youtube Iframe API中的一个bug造成的。 如果将youtube播放器的origin参数设置为

“chrome扩展名：//[扩展名id]”

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

“chrome扩展名：\\[扩展名id]”

我已经向谷歌集团报告了这个问题

---

您能解释一下您的解决方案是如何在这里应用的吗？YouTube的API中没有对“origin=chrome扩展”的适当支持。如果不提供原点，则OnReady不会启动。这是一个不错的解决办法，但我不认为我目前正在使用它。我刚开始用它构建了一个iframe，请看这里：@SeanAnderson这是否意味着您没有使用iframeapi控制播放器？如果是，您是如何控制它的？此解决方案已过时。我不再需要这样做了——我只需构建一个iframe并按照预期进行设置，是的，我正在使用iframeapi来控制它。

"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'",

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