it-swarm.com.de

Wie erhalte ich den Verweis auf einen vorhandenen YouTube-Player?

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

Ich habe ein paar Fragen zu dem, was passiert, wenn ich ein YouTube-Video mit Quellcode wie oben einbettet. Der Code sollte ein YouTube Player-Objekt generieren, das das Video so verarbeitet, wie es den Benutzern gefällt. Wenn ich selbst einen Youtube Player mit der Youtube Player API generiere (anstatt den eingebetteten Code zu verwenden), kann ich Anruffunktionen darauf aufrufen.

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//player.playVideo(); will play the video.

Meine Frage ist, wie steuere ich das vom eingebetteten Code erzeugte Player-Objekt? Anders ausgedrückt, von Seite http://www.youtube.com/watch?v=M7lc1UVf-VE . Wie kann ich das Video abspielen, indem Sie SOMEPlayer.playVideo() aufrufen? Wenn Sie zur URL gehen, ist das ytplayer-Objekt verfügbar, es scheint jedoch nicht die erforderlichen Funktionen zu enthalten.

Diese Frage könnte ein Duplikat von this sein. 

22
Maximus S

Dies kann wie folgt durchgeführt werden.

Angenommen, ein allgemeiner Quellcode für das Einbetten von YouTube:

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

ein. Fügen Sie einen enablejsapi-Parameter hinzu und setzen Sie ihn auf true 

index.html

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" enablejsapi="1" allowfullscreen></iframe>

b. Vergeben Sie eine eindeutige ID

<iframe id="youtube-video" width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" enablejsapi="1" allowfullscreen></iframe>

c. Laden Sie die iFrame-API und erstellen Sie einen Player, der auf den vorhandenen iFrame verweist

application.js

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();

}

function onPlayerStateChange() {
  console.log("my state changed");
}
26
Maximus S
var player = YT.get('id-of-youtube-iframe');
23
user2909143

Maximus S gab eine absolut korrekte Antwort. Die offizielle YouTube IFrame Player-API docs schlägt vor, den Player über eine eindeutige ID eines Iframes mit dem Video als var yPlayer = new YT.Player('unique-id'); zu initialisieren.

Für zukünftige Leser dieser Frage, die nach einem Weg suchen, einen YouTube-Player aus einem Verweis auf ein iframe-Element ohne id (als ich) zu generieren, können Sie dies tun, indem Sie var yPlayer = new YT.Player(iframeElement); ausführen, wenn Sie das type="text/html"-Attribut zum iframe-Element hinzufügen und festlegen enablejsapi=1-Parameter im src-Attribut:

<iframe type="text/html" height="360" width="640" src="https://www.youtube.com/embed/jNQXAC9IVRw?enablejsapi=1"></iframe>

Vollständiger Ausschnitt

5
Tim Osadchiy

Eine gute Möglichkeit, dies zu tun, ohne die IFrame-API im übergeordneten Fenster zu laden, besteht darin, das Objekt aus dem IFrame herauszuholen 

var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);
2
Thnesko

Die beste Antwort ist fast richtig . Sie müssen "enablejsapi = 1" auf den iframe src ..__ setzen. Etwas wie: 

<iframe id="youtube-video" width="560" height="315" 
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" 
        allowfullscreen>
</iframe>
0
faabiopontes