API iframe YouTube: comment contrôler un lecteur iframe déjà présent dans le HTML?

Question

Je veux pouvoir contrôler les lecteurs YouTube basés sur des iframes. Ces lecteurs seront déjà présents dans le HTML, mais je veux les contrôler via l'API JavaScript.

J'ai lu la documentation pour l'API iframe qui explique comment ajouter une nouvelle vidéo à la page avec l'API, puis la contrôler avec les fonctions du lecteur YouTube :

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('container', {
        height: '390',
        width: '640',
        videoId: 'u1zgFlCw8Aw',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

Ce code crée un nouvel objet lecteur et l'assigne à 'player', puis l'insère à l'intérieur de la div #container. Ensuite, je peux opérer sur 'player' et appeler playVideo(), pauseVideo(), etc. sur celui-ci.

Mais je veux être en mesure d'opérer sur les lecteurs iframe qui sont déjà sur la page.

Je pouvais le faire très facilement avec l'ancienne méthode d'intégration, avec quelque chose comme :

player = getElementById('whateverID');
player.playVideo();

Mais cela ne fonctionne pas avec les nouveaux iframes. Comment puis-je assigner un objet iframe déjà présent sur la page et ensuite utiliser les fonctions de l'API sur celui-ci ?

Answer 1

Merci Rob W pour votre réponse.

J'ai utilisé cela dans une application Cordova pour éviter de charger l'API et pouvoir facilement contrôler les iframes qui sont chargées dynamiquement.

J'ai toujours voulu avoir la possibilité d'extraire des informations de l'iframe, comme l'état (getPlayerState) et le temps (getCurrentTime).

Rob W a aidé à expliquer comment fonctionne l'API en utilisant postMessage, mais bien sûr cela envoie uniquement des informations dans une direction, de notre page web vers l'iframe. Accéder aux getters nécessite que nous écoutions les messages envoyés de l'iframe vers nous.

J'ai mis du temps à comprendre comment ajuster la réponse de Rob W pour activer et écouter les messages renvoyés par l'iframe. J'ai essentiellement cherché dans le code source de l'iframe YouTube jusqu'à ce que je trouve le code responsable de l'envoi et de la réception des messages.

La clé était de changer l'événement en 'listening', cela nous a donné accès à toutes les méthodes conçues pour renvoyer des valeurs.

Voici ma solution, veuillez noter que j'ai basculé en mode 'listening' uniquement lorsque les getters sont demandés, vous pouvez ajuster la condition pour inclure des méthodes supplémentaires.

Remarquez également que vous pouvez voir tous les messages envoyés depuis l'iframe en ajoutant un console.log(e) à la window.onmessage. Vous remarquerez qu'une fois que l'écoute est activée, vous recevrez des mises à jour constantes incluant le temps actuel de la vidéo. Appeler des getters comme getPlayerState activera ces mises à jour constantes mais ne renverra un message concernant l'état de la vidéo que lorsque l'état aura changé.

function callPlayer(iframe, func, args) {
    iframe=document.getElementById(iframe);
    var event = "command";
    if(func.indexOf('get')>-1){
        event = "listening";
    }

    if ( iframe&&iframe.src.indexOf('youtube.com/embed') !== -1) {
      iframe.contentWindow.postMessage( JSON.stringify({
          'event': event,
          'func': func,
          'args': args || []
      }), '*');
    }
}
window.onmessage = function(e){
    var data = JSON.parse(e.data);
    data = data.info;
    if(data.currentTime){
        console.log("The current time is "+data.currentTime);
    }
    if(data.playerState){
        console.log("The player state is "+data.playerState);
    }
}

Answer 2

Une solution rapide, si les requêtes ne posent pas de problème, et que vous voulez ce comportement pour quelque chose comme un affichage/masquage de vidéo, consiste à supprimer/ajouter l'iframe, ou nettoyer et remplir le src.

const stopPlayerHack = (iframe) => {
    let src = iframe.getAttribute('src');
    iframe.setAttribute('src', '');
    iframe.setAttribute('src', src);
}

L'iframe sera supprimée, arrêtera de jouer et sera chargée juste après cela. Dans mon cas, j'ai amélioré le code pour définir à nouveau le src uniquement à l'ouverture de la lightbox, donc le chargement ne se produira que si l'utilisateur demande à voir la vidéo.