Youtube iframe API:Chrome扩展程序未触发OnReady [英] Youtube iframe API: OnReady not firing for Chrome extension

问题描述

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

I'm trying to build a Chrome extension to show a Youtube video using Youtube's iframe API. However, the player's OnReady event never fires. From previous posts here I gather this is due to the fact that Youtube cannot access the player because it is a local instantiation.

我想知道:有没有办法使这项工作可行?

I wonder: is there a way to make this work?

我的代码在弹出窗口中实例化播放器.我想通过将视频ID传递到播放器的loadVideoById函数来向播放器播放新视频. 这是我的播放器的代码(在名为"youtube.js"的文件中):

My code instantiates the player in a popup. I want to play new videos to the player by passing the video ID to the player's loadVideoById function. Here's the code of my player (in a file called '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函数如下:

The onYouTubeIframeAPIReady function is as below:

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:

The popup.html file has a div for the player:

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

播放器应具有足够的权限. manifest.json文件中包含的安全策略:

The player should have sufficient rights. The security policy included in the manifest.json file:

"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#没有方法'loadVideoById'"之类的错误)，用于创建播放器.从以前的帖子中，我发现这些问题有一个相同的根源:由于YouTube没有与之关联的域，因此无法与我的播放器进行通信.

The player instantiates fine, and is able to play the initial videoId that I hardcode. However, the player's OnReady event does not seem to fire. Also, the majority of the API's functionality is unusable (i.e. returns errors like "TypeError: Object # has no method 'loadVideoById'" if I try to pass new videoIds) for the player created. From previous posts I gather that these problems have one and the same origin: the inability for Youtube to communicate with my player because it has no associated domain.

有没有办法做到这一点?如果是这样，我在做什么错?事先非常感谢！

Is there a way to do this? If so, what am I doing wrong? Thanks a lot beforehand!

有几个相关的帖子；但是，这些是Web html播放器，它们确实具有自己的域(如果这是表达它的正确方式)，而Chrome扩展程序则并非如此. YouTube API onPlayerReady不触发 Youtube嵌入iframe-事件不在本地触发

There are several related posts available; however, these are players for web html that do have their own domain (if that is the correct way of expressing it), which is not the case for a Chrome extension. YouTube API onPlayerReady not firing Youtube Embed Iframe - Events Not Firing In Local

还有另一篇相关的文章，但是对于这个特定问题并没有提出任何问题. Youtube API播放器Chrome扩展

There is one other related post, but that does not present an issue for this specific problem. Youtube API player chrome extension

推荐答案

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

This seems to be due to a bug in Youtube Iframe API. The events will not fire if you set the youtube player's origin parameter like

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

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

You have to change the slashes to backslashes like below

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

我已将此问题报告给Google网上论坛.

I have reported this issue to google group.

查看全文