我正在尝试构建一个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'",
播放器的实例化很好，并且能够播放我硬编码的初始视频ID。然而，玩家的OnReady事件似乎没有启动。此外，API的大部分功能对于创建的播放器是不可用的(即，如果我试图传递新的视频ID，则返回诸如"TypeError:Object#没有方法'loadVideoById'"之类的错误)。从之前的帖子中，我发现这些问题有一个相同的根源：Youtube无法与我的玩家通信，因为它没有相关的域。
有办法做到这一点吗？如果是，我做错了什么？事先非常感谢！
有几个相关的帖子可用；然而，这些都是web html的播放器，它们确实有自己的域(如果这是正确的表达方式的话)，而Chrome扩展则不是这样。YouTube API onPlayerReady未启动Youtube嵌入Iframe-本地中未触发事件
还有一个相关的帖子，但这并不是这个特定问题的问题。Youtube API播放器chrome扩展
我认为现在没有办法解决这个问题，但我想我应该与其他人分享我的解决方案。我认为这可能是最强大的解决方案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 Iframe API中的一个错误引起的。如果你设置youtube播放器的起源参数，如，事件将不会启动
"chrome-extension://[extension-id]"
你必须将斜杠改为反斜杠，就像下面的一样
"chrome-extension:\[extension-id]"
我已经向谷歌集团报告了这个问题。
https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num＝100&q＝&colspec=neneneba API%20ID%20Type%20Status%20Priority%20Stars%20摘要&groupby=&排序=&id=5670