Comment contrôler les lecteurs YouTube préexistants avec l'API JavaScript ?

Contrôler les lecteurs iFrame préexistants avec l'API YouTube

Comprendre le défi

Vous souhaitez contrôler les lecteurs YouTube déjà intégrés dans votre code HTML à l'aide de l'API JavaScript. La méthode API iframe standard pour ajouter de nouvelles vidéos ne s'applique pas aux lecteurs préexistants.

Solution utilisant une fonction personnalisée : callPlayer

Pour résoudre ce problème, nous J'utiliserai une fonction personnalisée appelée callPlayer. Cette fonction vous permet d'appeler diverses fonctions du lecteur YouTube sur n'importe quelle vidéo YouTube encadrée de votre page.

function callPlayer(frame_id, func, args) {
  // ... (function implementation)
}

Utilisation :

Une fois que vous disposez de cette fonction, vous pouvez utilisez-le comme ceci :

callPlayer("whateverID", function() {
  // This function runs once the player is ready ("onYouTubePlayerReady")
});

// When the player is not ready yet, the function will be queued.
// If the iframe cannot be found, a message is logged in the console.
callPlayer("whateverID", "playVideo");

Résolution des problèmes communs Problèmes :

Q : La vidéo ne peut pas être lue.
R : La lecture nécessite une interaction de l'utilisateur et la présence de allow="autoplay" dans l'URL iframe.

Q : Je reçois un message d'erreur "Une chaîne invalide ou illégale a été spécifié".
A : Vous devez ajouter ?enablejsapi=1 à la fin de votre URL iframe.

Q : L'API ne fonctionne pas sur un hôte local (file://).
A : Hébergez votre page en ligne ou utilisez JSFiddle pour tests.

Fonctionnalités supplémentaires :

• Les fonctions peuvent être mises en file d'attente lorsque le lecteur n'est pas prêt.
• Vous pouvez appeler "onYouTubePlayerReady" événement avec la syntaxe suivante : callPlayer('frame_id', function() { ... } ).
• API complète le support est disponible avec l'implémentation associée dans une réponse séparée : "Écoute d'un événement Youtube dans jQuery."

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!