Api Youtube en JS

INTRODUCTION

Nous sommes nombreux à insérer des vidéos YouTube dans nos articles. Rien de plus simple,
suffit de copier le code d'intégration, proposé sous la video sur le site YouTube (partager > Intégrer).
Puis de coller ce code dans un article, en mode source (<>).
Par exemple, cliquer sur ce lien : 

http://www.youtube.com/v/zMJlS0_Oe8A

 
Bon, c'est une vidéo des Stones parmi une playlist, en lecture auto et si on veut
uniquement le son ? (audio) et pas la vidéo ? (pour écouter une playlist en fond sonore, par exemple),
et pouvoir, surtout,  garder les commandes de cette vidéo (lecture, pause, stop...) C'est possible ???? Komenkonfè ???
Bah, oui c'est possible, car YouTube pense à tout. Il nous propose un "js api reference", en gros un
lecteur avec commandes en version javascript....voir ici.

Alors un p'tit exemple, cliquer sur : PLAY . Magique ....!!! Non ????
Waoooow, mais si je veux mettre en pause ou arrêter ? Hein ? Tout simple, on clique sur: PAUSE.
Toutes les commandes sont affichables : lecture, previous, next, pause, stop, volume etc...
Bien entendu, on peut les renommer à souhait. Exemple: 'lecture' peut devenir 'jouer', 'stop' devient 'arrêter' .
On peut remplacer les appellations par des images (ou icônes).

 Rappel : Javascript doit être activé sur votre blog 

MISE EN PLACE

Avant tout, il faut se procurer le fichier 'swfobject' en cliquant ici.
Une fois téléchargé, dé-zipper ce fichier sur votre bureau. Parmi les fichiers,
il y a celui qui nous intéresse ' swfobject.js '.
Importer ce fichier sur votre blog, soit en Document, ou dans Gérer les fichiers. (voir image)
Le but étant de récupérer l'adresse d'hébergement Eklablog. Exemple avec mon fichier, que
j'ai placé via Gérer les fichiers, dans un nouveau dossier 'youtube' :

http://ekladata.com/WEftEB9V1RxTU4pweJcefej7Z2I/swfobject.js

Ensuite, modifier le code ci-dessous en insérant votre URL fichier swfobject.js :

<script src="URL-swfobject.js"></script>

Ce qui donne pour moi:

<script src="http://ekladata.com/WEftEB9V1RxTU4pweJcefej7Z2I/swfobject.js">
</script>

Bon, tout le monde suit ? On continue....
Maintenant, on s'occupe de la vidéo et des commandes via Javascript. (voir doc)

<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?
enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>

Ci-dessus le script de base, celui qui met en place le lecteur.
En jaune l'identifiant de la video YouTube (11caractères), qui se trouve en fin d'URL, exemple: 

https://www.youtube.com/watch?v=Z1fj5x1UwDU

Donc VIDEO_ID = Z1fj5x1UwDU

Y a plus qu'a ajouter les commandes (voir doc):

La commande: Lecture (playVideo)

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

La commande: Stop (stopVideo)

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

La commande: Pause (pauseVideo)

function pause() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

Voici pour les 3 principales commandes, on ajoutera
"next" pour "suivant",et "previous" pour "précédent" si on utilise une playlist.
On ne s'inquiète pas !!!  tous ces bouts de scripts sont réunis dans un seul et même script.
Bon tout ça c'est du javascript, pour visualiser les commandes,
il faut un peu de code HTML, tout simple, comme ci-dessous:

<a title="Lire la vid&eacute;o" onclick="play();" href="#">Play</a>
<a title="Mettre en pause la vid&eacute;o" onclick="pause();" href="#">- Pause</a>
<a title="Stopper la vid&eacute;o" onclick="stop();" href="#">- Stop</a>

....et voili, voiça le résultat (avec un peu de CSS):

◄◄ ◙ ► X ►►

 

LES CODES