Lecteur YouTube multi-vidéos

Des vidéos et des boutons

Comme la plupart des sites de partage vidéo, Youtube propose avec chaque vidéo, à partir du bouton "Partager", un fragment de code HTML destiné à l'intégrer dans n’importe quelle autre page Web. Il est cependant assez simple de le remplacer par un code adapté à la spécificité de ce que l'on veut obtenir. Pourquoi ne pas utiliser le lecteur de base fourni par Youtube (un simple iframe) ? Parce qu'il engendre 14 requêtes vers les serveurs de Youtube dont 2 concerne la regie publicitaire "DoubleClick" pour un total de 2,26 Mo par vidéo et ce, uniquement pour l'initialisation du Player YouTube, que les vidéos soient effectivement lues ou non.

Capture d'écran

« Si vous avez un peu de patience, vous découvrirez qu’on peut utiliser les immenses ressources du Web pour perdre son temps avec une efficacité que vous n’aviez jamais osé imaginer. »
—Dave Barry

Pour éviter ces requêtes inutiles, le développeur Arthur Corenzan avait eu l'idée d'utiliser l'attribut srcdoc de l'iframe pour ne faire charger que la miniature, les requêtes youtube ne se déclenchant qu'après le lancement de la vidéo. On peut en étudier le code source, plutôt volumineux, sur cette page. Cette astuce réduit donc le nombre de requêtes à 1 (le chargement de la miniature). Mais il m'a paru encore plus simple et plus économique de contourner ces procédures en utilisant un iframe vide. Dans les faits, le dispositif se résume à une liste html de titres, et à une balise <div> permettant d'initialiser l'iframe, couplée avec un tableau javascript contenant la suite des Id vidéos. La balise <div> placée en haut de page définit l'emplacement sur la page où l'API iFrame doit afficher le lecteur vidéo. Le constructeur de l'objet de type lecteur auquel on transmet l'identifiant de la balise <div> délègue l'intégration à l'endroit spécifié. Plus précisément, c'est l'API qui remplace ensuite la balise <div> par la balise <iframe>.

Capture d'écran

« A quoi sert Internet. A part à aller sur Internet... »
—Jacob Berger

Un player YouTube Minimaliste

À la suite de l'iframe, on dispose dans la page html la liste des titres choisis accompagnés de boutons de lecture et d'arrêt, ainsi que d'un identifiant permettant de localiser l'Id video dans le tableau ou de générer un lien direct pour regarder celle-ci sur YouTube. L'execution du code javascript se déroule ensuite de la manière suivante. On commence par charger l'API iFrame Player à l'emplacement choisi, à la suite de quoi la fonction on­YouTube­Player­API­Ready() est définie sans spécifier de paramètre particulier. Le résultat sera un très spartiate cadre noir aux dimensions spécifiées, frappé en son centre du logo YouTube…

      var tag = document.createElement('script');

      tag.src = "iframe_api.js";

      var firstScriptTag = document.getElementsByTagName('script')[0];

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      

      function onYouTubeIframeAPIReady() {

          player = new YT.Player(video, { });

      }; 

J'utilise ensuite l'appel de la fonction onPlayer­State­Change pour interpréter l'appui sur les boutons de lecture ou d'arrêt. l'instruction est transmise au Player par l'intermédiaire de la commande loadVideoById. Le paramètre obligatoire videoId spécifie l'ID vidéo YouTube de la vidéo à lire (on peut récupérer l'identifiant de la vidéo dans l'URL affiché en haut du navigateur sur YouTube, à la suite de la chaîne https://www.youtube.com/watch?v= ou en cliquant sur partager et en copiant les 11 derniers caractères du lien proposé). les liens sont placés dans un tableau javascript sous la forme let tabvideo = ["Id1","Id2","Id3", … ]. À chaque itération la vidéo en cours dans l'iframe global sera stoppée et remplacée par la nouvelle dont la lecture débutera automatiquement. La fonction javascript gérant les clics et la réinitialisation des boutons de commandes est la suivante :

      function onPlayerStateChange(evenmt,cible) {

         var lienYT = 'l'+cible;

         if(evenmt=='play') {

	           player.loadVideoById(tabvideo[cible]);

	           for(i=1;i<6;i++) { 

	              liens = 'l'+i;

	              document.getElementById(liens).style.display='none'; 

	           };

	           document.getElementById(lienYT).style.display='inline';

         } else if(evenmt=='stop') {

	           player.stopVideo();

	           document.getElementById(lienYT).style.display='none';

         }					

      } 

L'intérêt de ce dispositif réside dans le fait qu'aucune requête externe n'est effectuée au chargement de la page. Par la suite, seules les vidéos demandées déclencheront les réquisitions nécessaires à la mise en œuvre de leur lecture. La démo fonctionnelle du player est à télécharger à l'aide du lien suivant. Elle se compose du script d'initialisation de l'Api, de deux icones "play" et "pause", et de la page html complète, le tout représentant un poids total de 2,4 Ko.