Youtube iframe API:OnReady未针对Chrome扩展程序触发

Question

我正在尝试使用Youtube的iframe API构建Chrome扩展程序以显示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的大部分功能都是不可用的(即,如果我尝试传递新的videoIds,则返回错误,例如"TypeError:Object#没有方法'loadVideoById').从以前的帖子我收集到这些问题有一个相同的起源:Youtube无法与我的播放器通信,因为它没有相关的域.

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

---

有几个相关的职位; 然而,这些是具有自己域名的web html的播放器(如果这是表达它的正确方式),Chrome扩展不是这种情况. YouTube API onPlayerReady未触发 Youtube嵌入式iframe - 事件未在本地触发

还有一个相关的帖子,但这不会给这个特定问题带来问题. Youtube API播放器镀铬扩展程序

Answer 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 使我们能够利用该智能。