Ich versuche eine Chrome-Erweiterung zu erstellen, um ein Youtube-Video mit der iframe-API von Youtube anzuzeigen. Das OnReady-Ereignis des Players wird jedoch nie ausgelöst. Von früheren Posts hier liegt dies daran, dass Youtube nicht auf den Player zugreifen kann, da es sich um eine lokale Instanziierung handelt.Youtube iframe API: OnReady feuert nicht für die Chrome-Erweiterung
Ich frage mich: gibt es eine Möglichkeit, dies zu tun?
Mein Code instanziiert den Player in einem Popup. Ich möchte neue Videos auf dem Player abspielen, indem ich die Video-ID an die loadVideoById-Funktion des Players übergebe. Hier ist der Code von meinem Player (in einer Datei 'youtube.js' genannt):
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.");
}
}
Die onYouTubeIframeAPIReady Funktion als unten:
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);
}
Die popup.html Datei ein div für die hat Spieler:
<div id="player"></div>
Der Spieler sollte ausreichende Rechte haben. Die Sicherheitsrichtlinie in der manifest.json-Datei enthalten:
"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'",
Der Spieler instanziiert in Ordnung, und ist in der Lage, die anfängliche videoId zu spielen, die mich hart codieren. Das OnReady-Ereignis des Players scheint jedoch nicht ausgelöst zu werden. Außerdem ist der Großteil der API-Funktionalität unbrauchbar (d. H. Gibt Fehler wie "TypeError: Objekt # hat keine Methode" loadVideoById "" wenn ich versuche, neue videoIds zu übergeben) für den erstellten Player zurück. Aus früheren Posts entnehme ich, dass diese Probleme ein und denselben Ursprung haben: die Unfähigkeit für Youtube, mit meinem Player zu kommunizieren, weil es keine zugehörige Domain hat.
Gibt es eine Möglichkeit, dies zu tun? Wenn ja, was mache ich falsch? Vielen Dank im Voraus!
Es sind mehrere verwandte Beiträge verfügbar; Dies sind jedoch Player für Web-HTML, die ihre eigene Domain haben (wenn dies der richtige Ausdruck ist), was bei einer Chrome-Erweiterung nicht der Fall ist. YouTube API onPlayerReady not firing Youtube Embed Iframe - Events Not Firing In Local
Es gibt eine andere verwandte Post, aber das ist kein Problem für dieses spezielle Problem darstellen.
Können Sie bitte erklären, wie Ihre Lösung hier gilt? – Realn0whereman
YouTube hat in seiner API keine ordnungsgemäße Unterstützung für 'origin = chrome-extension'. Wenn Sie keinen Ursprung angeben, wird OnReady nicht ausgelöst. Dies war ein guter Workaround dafür, aber ich glaube nicht, dass ich es momentan benutze. Ich baue zuerst einen iframe damit, siehe hier: https://github.com/MeoMix/StreususChromeExtension/blob/master/src/js/background/view/youTubePlayerView.js –
@SeanAnderson Bedeutet das, dass du nicht die Kontrolle hast Player, der die IFrame-API verwendet? Wenn ja, wie kontrollieren Sie es? –