web-dev-qa-db-fra.com

Comment obtenir la référence à un lecteur YouTube existant?

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

J'ai quelques questions sur ce qui se passe lorsque j'intègre une vidéo YouTube à l'aide du code source comme ci-dessus. Le code devrait générer un objet YouTube Player qui traite la vidéo comme le souhaitent les utilisateurs. Lorsque je génère moi-même un lecteur Youtube à l'aide de son API (au lieu d'utiliser le code d'intégration), je peux appeler des fonctions d'appel sur celui-ci.

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.

Ma question est, comment puis-je contrôler l'objet de lecteur généré par le code d'intégration? En d'autres termes, à partir de la page http://www.youtube.com/watch?v=M7lc1UVf-VE , comment puis-je lire la vidéo en appelant SOMEPlayer.playVideo()? Lorsque vous accédez à l'URL, l'objet ytplayer est disponible, mais il ne semble pas contenir les fonctions nécessaires.

Cette question pourrait être un duplicata de this . 

javascriptiframeyoutubeyoutube-api
22
Maximus S

Cela peut être fait comme suit.

Avec un code source général pour YouTube:

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

une. Ajoutez un paramètre enablejsapi et définissez-le sur true 

index.html

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

b. Donnez-lui un identifiant unique

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

c. Charger l'API iFrame et créer un lecteur qui référence l'iFrame existant

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 a donné une réponse parfaitement correcte. L'API officielle YouTube IFrame Player docs suggère d'initialiser le lecteur à l'aide de l'identifiant unique d'un iframe avec la vidéo sous la forme var yPlayer = new YT.Player('unique-id');.

Pour les futurs lecteurs de cette question qui cherchent un moyen de générer un lecteur YouTube à partir d'une référence à un élément iframe sans id (comme moi), il est possible de le faire en exécutant var yPlayer = new YT.Player(iframeElement); si vous ajoutez l'attribut type="text/html" à l'élément iframe et définissez Paramètre enablejsapi=1 dans l'attribut src:

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

Extrait complet

5
Tim Osadchiy

Pour ce faire, sans charger l'API IFrame dans la fenêtre parente, vous devez extraire l'objet de l'IFrame. 

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

La meilleure réponse est presque correcte ... vous devez placer "enablejsapi = 1" sur l'iframe src . Quelque chose comme: 

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