Api Youtube en JS

23.05.2014

Flash player 8+ et JavaScript pour voir cette video.

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).

Api Youtube en JS 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' :

https://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="https://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)

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éo" onclick="play();" href="#">Play</a>
<a title="Mettre en pause la vidéo" onclick="pause();" href="#">- Pause</a>
<a title="Stopper la vidéo" onclick="stop();" href="#">- Stop</a>

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

Play Pause Stop

LES CODES

<!----------------Fichier-swfobject-JS------------------------->
<p><script src="https://ekladata.com/WEftEB9V1RxTU4pweJcefej7Z2I/swfobject.js"></script>
</p>
<!-------------Lecteur-Youtube-et-commandes-JS----------------->
<div id="ytapiplayer">Flash player 8+ et JavaScript pour voir cette video.</div>
<p>
<script>// <![CDATA[
var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/zMJlS0_Oe8A?enablejsapi=1&version=3&playerapiid=ytplayer&amp;list=PLOERBSJvsbQp5TSxTBntv_MZNeZ4rSwe8",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
    }
function play() {
  if (ytplayer) {
    ytplayer.playVideo();
  }
}
function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}
function pause() {
  if (ytplayer) {
    ytplayer.pauseVideo();
  }
}
function next() {
  if (ytplayer) {
    ytplayer.nextVideo();
  }
}
function previous() {
  if (ytplayer) {
    ytplayer.previousVideo();
  }
}
// ]]></script>
</p>
<!--------------Lecteur-et-commandes-html-------------------->
<div id="lecteur-yt">
<p><a title="cliquer pour lire la vid&eacute;o" onclick="play();" href="#">Play</a> <a title="cliquer pour mettre en pause la vid&eacute;o" onclick="pause();" href="#">- Pause</a> <a title="cliquer pour stopper la vid&eacute;o" onclick="stop();" href="#">- Stop</a></p>
</div>
<p><button id="bouton" onclick="previous()">◄◄</button> <button id="bouton" onclick="pause()">◙</button> <button id="bouton" onclick="play()">►</button> <button id="bouton" onclick="stop()">▬</button> <button id="bouton" onclick="next()">►►</button></p>

See the Pen YouTube API - by Mike (@mikegmz) on CodePen.