Une galerie vidéo avec l’api de 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 :

 

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 :


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

Dans ce DIV la vidéo sera chargée.

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.

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:

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('' + data.entry[ "yt$statistics" ].viewCount + ' views ' );

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.

Auteur : willy Bahuaud

Webdesigner et créateur de webTV. Intégrateur Wordpress

38 pensées sur “Une galerie vidéo avec l’api de Youtube”

  1. Il est vraiment dommage que ce type de galerie vidéo ne puisse être correctement indexée comme faisant partie de la page, car c’est le seul point noir de cette méthode.

    Très bon tuto en tout cas. 😉

  2. @Daniel Roch, Merci ! J’ai vu certains sites où ils utilisent le framework zend Gdata sans pour autant avoir un hébergement dédié… je vais donc essayer de voir si c’est possible. Ce serait bien effectivement de pouvoir permettre l’indexation de sa galerie.

    @Marie-Aude, pour le sitemap c’est à vérifier… vu que les vidéos ne sont pas réellement présentes sur le site, mais bien hébergés chez Youtube. Je vais faire le test, pour voir…

  3. Mais alors question conne, car je ne suis pas un utilisateur MAC, mais que c’est une de mes préoccupations, comment ça rend sur iPad par exemple ? Youtube met sa surcouche ?

    super tuto en tout cas !

  4. @alain, je ne vais pas pouvoir te répondre avec précision car je n’ai pas d’Ipad ^^
    Je sais que l’embed de vidéo Youtube marche sur les Ipads (car l’engin embarque une appli/plugin youtube, je crois), mais l’API c’est moins sûr…

    Quelqu’un saurai-t’il nous répondre ?

  5. @Pinault oui bien sur, je suis en train de rédiger un tutoriel pour faire la même chose sous dailymotion et vimeo.

    Par exemple, le site artplaTV est fait avec l’API de vimeo

  6. Merci pour ce tuto très clair.
    Avez une idée d’un site qui utiliserai ce principe avec dailymotion ?

    Hate de voir les tutos sur dailymotion et vimeo.

    Bonne continuation

  7. Bonjour,

    merci pour ce tuto.
    J’avais une petite question, est ce possible d’afficher sur une même page 2 YTPlayer( youtube player)??

    Merci.

  8. Bonjour
    Merci pour ce tuto
    Je démarre dans le javascript
    j’ai un problème sur la miniature elle s’affiche mais on ne peut pas cliquer dessus.

  9. Bonjour,
    Merci pour le tuto, par contre je l’ai utilisé et j’ai l’erreur suivante quand je click sur une video miniature :
    Uncaught ReferenceError: ytplayer is not defined
    loadVideo
    (anonymous function)
    onclick

    Avez vous une solution ?
    Merci

  10. Bonjour,
    super le tuto.
    Pour ceux que sa intéresserais voici la version pour l’iframe youtube.
    permet de faire fonctionner la vidéo sur les mobiles.

    // 1. code permettant de charger le player iframe asynchrone.
    var tag = document.createElement(‘script’);
    tag.src = « http://www.youtube.com/player_api »;
    var firstScriptTag = document.getElementsByTagName(‘script’)[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 2. création de l’iframe (player youtube)
    // aprés le chargement de l’api.
    var player;
    function onYouTubePlayerAPIReady() {
    player = new YT.Player(‘videoDiv’, {
    height: ‘278’,
    width: ‘453’,
    videoId: ‘ZzVwO_bQhy4’,
    events: {
    ‘onReady’: onPlayerReady,
    ‘onStateChange’: onPlayerStateChange
    }
    });
    }

    // 3. L’API appel cette fonction lorsque la vidéo est prête .
    function onPlayerReady(event) {
    event.target.playVideo();
    }

    //4 fonction utiliser sur ce tuto

    function loadVideo(idvid) {
    var videoID = idvid;
    if(player ) {
    player .loadVideoById(videoID);
    }
    }

    // pas besoin de traduire
    function stopVideo() {
    player.stopVideo();
    }

  11. Bonjour

    Excellent tutoriel.

    Je souhaiterais confier cette galerie à un autre utilisateur, connaissez vous un script réalisant une mini administration de cette galerie.

    Merci d’avance de vos réponses
    Cordialement
    Michel

  12. Bonjour,

    J’ai suivi le tuto à la lettre mais lorsque je clique sur les miniatures rien ne se passe…

    Par contre le lecteur se lance bien.

    Connaissez vous la cause de ce problème?
    Sinon merci pour le tuto.

    Cordialement
    David

  13. bonjour!

    Votre tuto est vraiment bien fait et m’a vraiment aidé. J’aurais cependant une question, connaitriez vous une solution pour que le lecteur ne bug pas sur les cotés à la lecture d’une video sur le navigateur « google chrome »?

    Merci

  14. re!

    je reviens vers vous car j’ai résolu mon souci qui etait de remplacer wmode: »transparent » par wmode: »opaque ». J’aurais une autre question :

    J’ai mon menu qui arrivant au dessus de la video sur SAFARI cette fois ci 😉 deffile et arrivé sur le lecteur video, au contact du lecteur elle devienne invisible. D’ou vient ce probleme?

  15. Bonjour,
    tous d’abord un grand merci pour votre tuto il m’a beaucoup aidé.
    je tiens a vous passer une améloration du code de l’api qui comprend le fullsceen

    google.load(« swfobject », « 2.1 »);

    function updateHTML(elmId, value) {
    document.getElementById(elmId).innerHTML = value;
    }
    function loadVideo(idvid) {
    var videoID = idvid;
    if(ytplayer) {
    ytplayer.loadVideoById(videoID);
    }
    }
    function onPlayerError(errorCode) {
    alert(« An error occured of type: » + errorCode);
    }
    function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById (« myytplayer »);
    ytplayer.addEventListener(« onError », « onPlayerError »);
    }
    function loadPlayer() {
    var videoID = ‘votre video’;
    var params = { allowScriptAccess: « always », allowFullScreen: »true » };
    var atts = { id: « ytPlayer », wmode: »opaque » };
    swfobject.embedSWF(« http://www.youtube.com/v/ » + videoID + « &enablejsapi=1&version=3&playerapiid=ytplayer&fs=1&hd=1&enablejsapi=1&showinfo=1&showsearch=1 »,
    « videoDiv »,
    width=640,
    height=360,
    « 8 », null, null, params, atts);
    }
    function _run() {
    loadPlayer();

    }
    function youtubeFeedCallback( data ){
    document.writeln( data.entry[ « title » ].$t );
    }
    google.setOnLoadCallback(_run);

  16. Fibers is usually used with ready meals to make them more inviting, yet it will be naturallyoccurring in many certain foods which in turn Us residents consume each day. It shouldn’t be harnessed for a substitute for healthcare information, examination and also cure. LIVESTRONG is known as a subscribed tradition on the LIVESTRONG Basic foundation.

  17. Bonjour, je souhaiterais supprimer les suggestions youtube en fin de video. Comment dois-je modifier votre code?
    merci en tous cas pour ce beau travail.

  18. Bonjour! je reposes la même question qui a été posé précédemment mais qui malheureusement n’a visiblement jamais été résolut. J’ai un soucis avec les miniatures, lorsque je clic dessus la vidéo ne se charge pas. Avez-vous une idée de ce qui pourrait être la cause de ce mal fonctionnement? merci d’avance!

  19. Très bon tutoriel. Il m’a été beaucoup utile. Mais j’aimerais savoir comment faire revenir automatique au début de la vidéo une fois la lecture terminer?

  20. pour ceux qui ont réussi ce tuto, quand je clique sur une des miniatures il se passe rien? avez vous une idée d’origine du probleme?

  21. Salut à tous,
    merci au développeur du tuto et à tout-e-s ceux-elles qui apportent leurs contributions.
    Cependant, comme certains, quand je clique sur les miniatures, elles ne fonctionnent pas.
    D’autre part, je viens de modifier les dimension du lecteur, et à ma surprise, rien ne change. Je les ai mêmes enlevées (width:700 et height: 360 pour mémoire) et là encore, aucun changement (?…). A ceux qui ont posé la question des miniatures,, avez-vous eu des réponses ? Sinon, Willy, sais-tu quelle peut-être la source de ce dysfonctionnement ?
    Merci pour les réponses, Djeros

  22. Merci pour ce tuto !!

    Pour répondre à ceux pour qui le click sur les miniatures ne marchent pas :
    Ca ne fonctionne pas en local, mais si vous mettez votre site sur un serveur ça fonctionne parfaitement !

  23. Bonjour je n’ai pas eu le temps de lire tout les commentaires donc je ne sais pas si une personne a eu le même problème que moi mais je m’explique. J’ai copier le code entier de votre page « exemple » pour faire des test, le problème et que quand je clique sur les trois vidéos en bas aucune ne se lance il ne se passe rien. Que faire ? Merci d’avance 🙂

  24. Ok pas besoin de répondre a mon commentaire, j’ai lu que les premiers et je viens de m’apercevoir que la réponse est dans les dernier. Desole

  25. Bonjour, j’utilise ce code depuis 2 ans déjà avec succés jusqu’a dernierment ou mes miniatures se chargent bien par contre quand je clique dessus rien ne passe, le lecteur a tout simplement disparu, est ce dû a un changement dans l’api de google ? comment y remédier ? si quelqu »un a la solution je suis preneur, en attendant je continu mes recherches de mon coté

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *