Galerie vidéo avec Youtube

De nombreuses personnes me contactent pour me demander comment réaliser une galerie de vidéo à la demande, sur leur site web. C'est ce qu'explique ce tutoriel : comment créer une galerie vidéo à l'aide de Youtube.

J'ai choisi de vous montrer le principe avec Youtube, car leur API est très bien documentée (comme toujours chez google), mais cela aurait pu être avec Dailymotion ou tout autre site de partage de vidéo disposant d'une api développeur.
En fait, l'idée c'est d'externaliser l'hébergement des vidéos, et de pouvoir diffuser des vidéos produites par des internautes lambdas. On économise le coût d'un serveur de streaming (et de la bande passante surtout), et on profite de l'aspect communautaire de Youtube.

Dans l'exemple, une vidéo est chargée par défaut et en dessous se trouvent trois vignettes ; un clic de l'internaute sur l'une d'elle chargera le film.

Méthode :

La première étape consiste à charger, à partir de Google, les scripts qui vont nous permettre de manipuler les vidéos.
Insérez cette ligne dans le head de votre page :

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

Cette ligne va charger l'API javascript de Google à partir de leur CDN (et donc nous permettre de piloter les vidéos Youtube en javascript, et également d'instancier swfObject).

En dessous de cette ligne, nous allons ouvrir une balise script dans la quelle nous allons faire appel à swfObject, puis insérez les fonctions dont nous allons avoir besoin :

<script type="text/javascript">
      //chargement de swfobject à partir du CDN de google
      google.load("swfobject", "2.1");
 
      // Update a particular HTML element with a new value
      function updateHTML(elmId, value) {
        document.getElementById(elmId).innerHTML = value;
      }
 
      // chargement de la vidéo concerné dans le player
      function loadVideo(idvid) {
        var videoID = idvid;
        if(ytplayer) {
          ytplayer.loadVideoById(videoID);
        }
      }
 
      // fonction appellé en cas d'erreur
      function onPlayerError(errorCode) {
        alert("An error occured of type:" + errorCode);
      }
 
      // fonction appellé au chargement du player
      function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("ytPlayer");
        ytplayer.addEventListener("onError", "onPlayerError");
      }
 
      // Méthode mère qui va être appelée en première, pour charger la vidéo qu'il faut, là où il faut
      function loadPlayer() {
        var videoID = 'ZzVwO_bQhy4';  // vidéo à charger
        var params = { allowScriptAccess: "always" }; // persmission d'acces d'un autre domaine
        var atts = { id: "ytPlayer", wmode:"transparent" };  // attributs du player
		// embed avec swf object
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1",
		"videoDiv", //id de l'élément contenant le player
		700, //largeur du player
		340, //hauteur du player
		"8", null, null, params, atts); 
      }
      function _run() {
        loadPlayer();
      }
      google.setOnLoadCallback(_run);
</script>

Dans cette exemple, il faut veiller à remplacer "ZzVwO_bQhy4" par l'ID de la vidéo que vous voulez charger par défaut, "videoDiv" par l'ID de l'élément à la place duquel le lecteur va être inséré, "700" par la largeur du lecteur (en pixel) et "340" par sa hauteur.

Ensuite il faut que vous ajoutiez, dans le corps de votre page, l'élément où va se charger le player Youtube (en fait l'élément va être remplacé, donc pour styler le player en css, il faudra appliquer les styles sur #ytPlayer et non sur #videoID...).

<div id="videoDiv"> 
	Dans ce DIV la vidéo sera chargée.
</div>

Si vous testez le script, à ce stade, la vidéo devrait se charger correctement.
Il nous reste maintenant à intégrer les miniatures des autres films.

<div onclick="loadVideo('KRy8N1P1EUI')">
	<img src="http://img.youtube.com/vi/KRy8N1P1EUI/0.jpg" width="180" alt="" />
</div>

La fonction loadVideo nous permet de lancer, au clic, la vidéo donc l'ID est en argument, tout simplement...

L'image est directement récupérée chez Youtube. 0.jpg correspond à une image capturée au milieu de la vidéo, en taille originale, 1.jpg à une miniature (120px x 90px) en début de vidéo, 2.jpg au milieu et 3.jpg en fin de film.

Récupérer des informations sur les vidéos :

Dans l'exemple, j'ai aussi ajouté au miniatures le titre de la vidéo (ça sert ). Pour obtenir des infos sur celles-ci, Youtube met à disposition un flux XML pour chaque vidéo :

http://gdata.youtube.com/feeds/api/videos/KRy8N1P1EUI?v=2

KRy8N1P1EUI correspond bien sûr à l'ID de la vidéo qui nous intéresse.

J'ai donc ajouté, dans chaque miniature (en dessous de la balise img) un script qui va appeler ce flux XML et faire intervenir une fonction callback (que je placerai, elle, dans le script en haut de page) chargé de parser ce flux (qui peut être récupéré en json) et de renvoyer uniquement les infos qui nous intéressent.

Le code de la miniature de vient donc:

<div onclick="loadVideo('KRy8N1P1EUI')">
	<img src="http://img.youtube.com/vi/KRy8N1P1EUI/0.jpg" width="180" alt="" />
	<div><script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/KRy8N1P1EUI?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script></div>
</div>

Et dans le script du haut, avant la fonction "google.setOnLoadCallback(_run);", j'ai ajouté :

// ajout d'infos sur les vidéos
function youtubeFeedCallback( data ){
	document.writeln( data.entry[ "title" ].$t );
}

J'aurais pu ajouter beaucoup d'autres choses dans la fonction youtubeFeedCallback, comme par exemple un bout de code pour récupérer le nombre de fois où la vidéo à été vue :

document.writeln('<span class="ytviews">' + data.entry[ "yt$statistics" ].viewCount + ' views </span>' );

Enfin bref, en examinant le XML renvoyé, vous pourrez obtenir tout ce que vous souhaitez inséré dans votre miniature.

Limitations :

Le code présenté ici fonctionne avec tous les navigateurs supportant le javascript. Cependant, il présente plusieurs soucis inhérents à l'utilisation du javascript :

• aucune possibilité d'indexation
• exécution du code après le chargement de la page...

Youtube propose une API en php qui permet de passer outre ces problèmes, mais elle requiert le module "Zend Gdata" installé sur le serveur. Il faudra donc, pour ceux qui souhaite optimiser ce système, avoir la main sur leur serveur (dédié donc...).

Youtube donne la possibilité à ceux qui publient du contenu de bloquer "l'embed" de leurs vidéos, c'est à dire la possibilité de les lire sur un autre site.
En conséquence, ces vidéos renverront une erreur si vous souhaitez les utiliser avec ce script.