我正在尝试使用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 not firing Youtube Embed Iframe - Events Not Firing In Local
还有一个相关的帖子,但这不会给这个特定问题带来问题 . Youtube API player chrome extension
2 回答
我认为现在没有办法解决这个问题,但我认为我会与其他人分享我的解决方案 . 我认为这可能是最强大的解决方法:
我更喜欢这种实现,因为它允许您在创建iframe时准确地确定是使用http还是https . 这很重要,因为有些客户可能无法使用http或https,而且YouTube的API能够智能地确定 . 首先将API应用于dummyTarget可以让我们利用这种智能 .
这似乎是由于Youtube Iframe API中的一个错误 . 如果您设置youtube播放器的原始参数,则不会触发事件
"chrome-extension://[extension-id]"
您必须将斜杠更改为反斜杠,如下所示
"chrome-extension:\\[extension-id]"
我已将此问题报告给Google群组 .
https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=5670