我正在尝试构建一个 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 的大部分功能都无法使用(即,如果我尝试传递新的视频 ID,则会返回类似“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
最佳答案
我认为目前没有办法解决这个问题,但我想我会与其他人分享我的解决方案。我认为这可能是最强大的解决方法 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 允许我们利用该智能。
关于javascript - Youtube iframe API : OnReady not firing for Chrome extension,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21758040/