Utilisation de l'API JavaScript YouTube
Cette API permet d'insérer un lecteur YouTube (YT) dans une page HTML/JSF et de permettre de manipuler la vidéo. Par exemple on peut ainsi ajouter un bouton sur lequel l'utilisateur peut cliquer pour ralentir le débit de la vidéo.
Référence de l'API : https://developers.google.com/youtube/iframe_api_reference
Les étapes à suivre :
- Insérer dans la page une div qui contiendra le lecteur YT (vous pouvez lui donner l'id que vous voulez mais il faudra utiliser cet id dans le fichier JavaScript de l'étape 2, en paramètre du constructeur du Player) :
<div id="player"></div>
- Dans un fichier JavaScript utilisé par la page (<script src="ce fichier.js"></script>) écrire le code qui sera exécuté quand la page sera chargée.
Quelques explications sur le code de ce fichier (lisez la référence de l'API donnée ci-dessus pour plus de détails) :
- L'id YouTube de la vidéo est dans la variable idVideo. Vous pouvez le remplacer par celui que vous voulez.
- La fonction onYouTubeIframeAPIReady() sera lancée quand l'API sera chargée. Elle crée un lecteur YT qui remplacera la div "player" par new YT.Player('player', ...). Vous pouvez changer les propriétés de ce lecteur, en particulier les fonctions callbacks lancées quand des événements surviennent. Par exemple onStateChange est déclenché quand l'été du lecteur change (si la vidéo est mise en pause par exemple) ; onReady est déclenché dès que le lecteur est prêt à jouer une vidéo. Vous pouvez mettre ce que vous voulez dans ces fonctions callbacks.
- Juste pour vous montrer comment on peut manipuler la vidéo j'ai ajouté une fonction reculerDe(n) qui permet de revenir n secondes avant la position actuelle dans la vidéo. A vous de jouer pour ajouter des manipulations plus utiles. Par exemple pour permettre de marquer une position dans la vidéo et y revenir ensuite, ou pour augmenter ou diminuer la vitesse de défilement de la vidéo (player.setPlaybackRate ; vous avez toutes les fonctions disponibles dans la référence de l'API).
- Modifiez le fichier HTML ou JSF pour que l'utilisateur puisse manipuler la vidéo. Si vous voulez initialiser des variables JavaScript vous pouvez le faire dans une fonction init() appelée au chargement de la page ( (<body onload="init();">)