Comment puis-je obtenir la référence d'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 quand j'intègre une vidéo YouTube en utilisant le code source comme ci-dessus. Le code doit générer un objet YouTube Player qui traite la vidéo comme les utilisateurs aiment. Quand je génère un lecteur Youtube par moi-même en utilisant L'API de lecteur Youtube(au lieu d'utiliser le code embed), je peux appeler des fonctions d'appel sur elle.
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 player généré par l'intégration code? Pour le dire autrement, à partir de la page http://www.youtube.com/watch?v=M7lc1UVf-VE , comment lire la vidéo en appelant SOMEPlayer.playVideo() ? Lorsque vous accédez à l'url ytplayer l'objet est disponible, mais il ne semble pas contenir les fonctions nécessaires.
cette question pourrait être un double de cette .
5 réponses
cela peut être fait comme suit.
un général YouTube code source:
<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>
A. Ajouter un paramètre enablejsapi et définir true
de l'index.html
<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" enablejsapi="1" allowfullscreen></iframe>
B. Donnez-lui un id 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 renvoie à l'iFrame
de l'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");
}
Maximus s a donné une réponse parfaitement correcte. L'API officielle YouTube IFrame Player
suggère d'initialiser le lecteur par un identifiant unique d'une iframe avec la vidéo comme var yPlayer = new YT.Player('unique-id'); .
pour les futurs lecteurs de cette question à la recherche d'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 type="text/html" attribut iframe element et 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>
une excellente façon de le faire sans charger L'API IFrame dans la fenêtre mère est de saisir l'objet à partir de L'IFrame
var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);
La meilleure réponse est presque droit. 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>