Ajout d'options permettant de lancer automatiquement la lecture des vidéos et de boucler à l'infini, ce qui ne sera pas/plus le cas par défaut.

src/example.js

@@ -7,15 +7,15 @@ try {
     var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"];
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
     if (window.location.hash !== undefined && window.location.hash !== "")
-        vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
+        vCarousel_1.vCarousel(videosContainers_1, { firstVideoId: window.location.hash.replace("#", "") });
     else
-        vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif, sauf si on souhaite qu'une vidéo autre que la première soit affichée par défaut
+        vCarousel_1.vCarousel(videosContainers_1);
     // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
     var selectLinks = document.querySelectorAll(".selectVideo");
     var _loop_1 = function (i) {
         var link = selectLinks[i];
         link.addEventListener("click", function (e) {
-            vCarousel_1.vCarousel(videosContainers_1, link.hash.replace("#", ""));
+            vCarousel_1.vCarousel(videosContainers_1, { firstVideoId: link.hash.replace("#", ""), playFirstVideo: true }); // ici je demande à ce que la lecture de la vidéo choisie soit lancée automatiquement.
         });
     };
     for (var i = 0; i < selectLinks.length; i++) {

src/example.ts

@@ -7,9 +7,9 @@ try
     const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
     if(window.location.hash!==undefined && window.location.hash!=="")
-        vCarousel(videosContainers, window.location.hash.replace("#",""));
+        vCarousel(videosContainers, { firstVideoId:window.location.hash.replace("#","") });
     else
-        vCarousel(videosContainers);// le deuxième paramètre est facultatif, sauf si on souhaite qu'une vidéo autre que la première soit affichée par défaut
+        vCarousel(videosContainers);
     
     // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
     let selectLinks=document.querySelectorAll(".selectVideo");
@@ -18,7 +18,7 @@ try
         let link=<HTMLAnchorElement>selectLinks[i];
         link.addEventListener("click", function(e)
         {
-            vCarousel(videosContainers, link.hash.replace("#",""));
+            vCarousel(videosContainers, { firstVideoId:link.hash.replace("#",""), playFirstVideo:true });// ici je demande à ce que la lecture de la vidéo choisie soit lancée automatiquement.
         });
     }
 }

src/exampleFlickity.js

@@ -39,17 +39,17 @@ try {
     var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"];
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
     if (window.location.hash !== undefined && window.location.hash !== "") {
-        vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
+        vCarousel_1.vCarousel(videosContainers_1, { firstVideoId: window.location.hash.replace("#", "") });
         selectFlickityForHash(flktyCarousel_1, location.hash);
     }
     else
-        vCarousel_1.vCarousel(videosContainers_1, ""); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
+        vCarousel_1.vCarousel(videosContainers_1, { firstVideoId: "" }); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
     // Lorsque l'utilisateur clique sur une des images pour sélectionner une vidéo à afficher, on actualise l'affichage :
     var selectLinks = document.querySelectorAll(".selectVideo");
     var _loop_1 = function (i) {
         var link = selectLinks[i];
         link.addEventListener("click", function (e) {
-            vCarousel_1.vCarousel(videosContainers_1, link.hash.replace("#", ""));
+            vCarousel_1.vCarousel(videosContainers_1, { firstVideoId: link.hash.replace("#", ""), playFirstVideo: true, playNextVideos: true }); // les vidéos successives sont lancées automatiquement
         });
     };
     for (var i = 0; i < selectLinks.length; i++) {

src/exampleFlickity.ts

@@ -47,11 +47,11 @@ try
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
     if(window.location.hash!==undefined && window.location.hash!=="")
     {
-        vCarousel(videosContainers, window.location.hash.replace("#",""));
+        vCarousel(videosContainers, { firstVideoId:window.location.hash.replace("#","") });
         selectFlickityForHash(flktyCarousel, location.hash);
     }
     else
-        vCarousel(videosContainers, ""); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
+        vCarousel(videosContainers, { firstVideoId:"" }); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
     
     // Lorsque l'utilisateur clique sur une des images pour sélectionner une vidéo à afficher, on actualise l'affichage :
     let selectLinks=document.querySelectorAll(".selectVideo");
@@ -60,7 +60,7 @@ try
         let link=<HTMLAnchorElement>selectLinks[i];
         link.addEventListener("click", function(e)
         {
-            vCarousel(videosContainers, link.hash.replace("#",""));
+            vCarousel(videosContainers, { firstVideoId:link.hash.replace("#",""),playFirstVideo:true,playNextVideos:true });// les vidéos successives sont lancées automatiquement
         });
     }
     // De même quand le hash change, on adapte l'item sélectionné de flickity

src/vCarousel.js

@@ -4,10 +4,12 @@ exports.vCarousel = void 0;
 var Flickity = require("flickity");
 /// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement.
 /// Le tableau n'est pas dédoublonné, pour rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel.
-/// On peut éventuellement fournir l'id du conteneur de la première vidéo à afficher lors de l'appel
+/// Plusieurs options sont possibles :
-/// Ou encore indiqué qu'aucune ne doit être affichée sans action en passant une chaîne vide
+/// -  firstVideoId est une chaîne permettant de fournir l'id du conteneur de la première vidéo à afficher lors de l'appel. Par défaut la première vidéo de la liste sera affichée. Si on passe une chaîne vide, aucune ne sera affichée.
-/// Par défaut la première vidéo de la liste sera affichée
+/// - playFirstVideo et playNextVideos demandent de lancer automatiquement la lecture respectivement de la vidéo demandée et de celles automatiquement chargée par la fonction. Ce n'est pas le cas par défaut et peut être bloqué par le navigateur.
-exports.vCarousel = function (vContainers, firstVideoId) {
+/// - noStop permet de demander à ce que les vidéos continuent à tourner même quand toutes ont été affichées. Par défaut, le carrousel s'arrête.
+exports.vCarousel = function (vContainers, opts) {
+    if (opts === void 0) { opts = {}; }
     // On commence par vérifier que les ids de conteneurs fournis sont correctes.
     // C'est-à-dire qu'il s'agit bien d'éléments HTML contenant au moins une vidéo.
     var realVContainers = [];
@@ -24,10 +26,10 @@ exports.vCarousel = function (vContainers, firstVideoId) {
                 realVContainers.push({ id: containerId, containerElt: checkContainerExist, videoElt: checkVideoExist });
         }
     }
-    // Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
+    // Si opts.firstVideoId a été fourni, on vérifie aussi qu'il est valide.
-    if (firstVideoId !== undefined && firstVideoId !== "" && (realVContainers.findIndex(function (video) { return video.id === firstVideoId; }) === -1)) {
+    if (opts.firstVideoId !== undefined && opts.firstVideoId !== "" && (realVContainers.findIndex(function (video) { return video.id === opts.firstVideoId; }) === -1)) {
-        console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + firstVideoId + "), mais il n'est pas valide.");
+        console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + opts.firstVideoId + "), mais il n'est pas valide.");
-        firstVideoId = undefined;
+        opts.firstVideoId = undefined;
     }
     // Il doit rester au moins deux vidéos à faire tourner.
     var nbVContainers = realVContainers.length;
@@ -37,27 +39,40 @@ exports.vCarousel = function (vContainers, firstVideoId) {
         var _loop_1 = function (i) {
             var vContainer = realVContainers[i].containerElt;
             var video = realVContainers[i].videoElt;
-            if ((firstVideoId !== undefined && realVContainers[i].id !== firstVideoId) || (firstVideoId === undefined && i !== 0) || firstVideoId === "")
+            if ((opts.firstVideoId !== undefined && realVContainers[i].id !== opts.firstVideoId) || (opts.firstVideoId === undefined && i !== 0) || opts.firstVideoId === "")
                 vContainer.style.display = "none";
-            else
+            else {
-                vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage.
+                vContainer.style.display = "block";
+                if (opts.firstVideoId !== undefined && opts.playFirstVideo === true)
+                    video.play();
+            }
+            nbTurn = 0;
             video.addEventListener("ended", function () {
-                vContainer.style.display = "none";
+                // Sauf si demandé en option, le carrousel s'arrête lorsque toutes les vidéos ont été affichées une fois.
-                var nextVContainer, nextHash;
+                if (nbTurn < (nbVContainers - 1) || opts.noStop === true) {
-                if (i < (nbVContainers - 1)) {
+                    vContainer.style.display = "none";
-                    nextVContainer = realVContainers[i + 1].containerElt;
+                    var nextVContainer = void 0, nextVideo = void 0, nextHash = void 0;
-                    nextHash = realVContainers[i + 1].id;
+                    if (i < (nbVContainers - 1)) {
+                        nextVContainer = realVContainers[i + 1].containerElt;
+                        nextVideo = realVContainers[i + 1].videoElt;
+                        nextHash = realVContainers[i + 1].id;
+                    }
+                    else {
+                        nextVContainer = realVContainers[0].containerElt;
+                        nextVideo = realVContainers[0].videoElt;
+                        nextHash = realVContainers[0].id;
+                    }
+                    nextVContainer.style.display = "block";
+                    // On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée.
+                    // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
+                    window.location.assign("#" + nextHash);
+                    if (opts.playNextVideos === true)
+                        nextVideo.play();
+                    nbTurn++;
                 }
-                else {
-                    nextVContainer = realVContainers[0].containerElt;
-                    nextHash = realVContainers[0].id;
-                }
-                nextVContainer.style.display = "block";
-                // On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée.
-                // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
-                window.location.assign("#" + nextHash);
             });
         };
+        var nbTurn;
         // Tous les conteneurs sont cachés, sauf celui demandé.
         // La fin de lecture d'une vidéo provoque son remplacement par la suivante.
         for (var i = 0; i < nbVContainers; i++) {

src/vCarousel.ts

@@ -1,11 +1,21 @@
 const Flickity = require("flickity");
 
+interface options
+{
+    firstVideoId?: string;
+    playFirstVideo?: boolean;
+    playNextVideos?: boolean;
+    noStop?: boolean;
+}
+
+
 /// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement.
 /// Le tableau n'est pas dédoublonné, pour rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel.
-/// On peut éventuellement fournir l'id du conteneur de la première vidéo à afficher lors de l'appel
+/// Plusieurs options sont possibles :
-/// Ou encore indiqué qu'aucune ne doit être affichée sans action en passant une chaîne vide
+/// -  firstVideoId est une chaîne permettant de fournir l'id du conteneur de la première vidéo à afficher lors de l'appel. Par défaut la première vidéo de la liste sera affichée. Si on passe une chaîne vide, aucune ne sera affichée.
-/// Par défaut la première vidéo de la liste sera affichée
+/// - playFirstVideo et playNextVideos demandent de lancer automatiquement la lecture respectivement de la vidéo demandée et de celles automatiquement chargée par la fonction. Ce n'est pas le cas par défaut et peut être bloqué par le navigateur.
-export const vCarousel = (vContainers:string[], firstVideoId?:string) : void =>
+/// - noStop permet de demander à ce que les vidéos continuent à tourner même quand toutes ont été affichées. Par défaut, le carrousel s'arrête.
+export const vCarousel = (vContainers:string[], opts:options={}) : void =>
 {    
     interface videoDOM
     {
@@ -32,11 +42,11 @@ export const vCarousel = (vContainers:string[], firstVideoId?:string) : void =>
         }
     }
     
-    // Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
+    // Si opts.firstVideoId a été fourni, on vérifie aussi qu'il est valide.
-    if(firstVideoId!==undefined && firstVideoId!=="" && (realVContainers.findIndex(video => video.id === firstVideoId) === -1))
+    if(opts.firstVideoId!==undefined && opts.firstVideoId!=="" && (realVContainers.findIndex(video => video.id === opts.firstVideoId) === -1))
     {
-        console.error("Vous avez fourni l'id de la vidéo à afficher en premier ("+firstVideoId+"), mais il n'est pas valide.");
+        console.error("Vous avez fourni l'id de la vidéo à afficher en premier ("+opts.firstVideoId+"), mais il n'est pas valide.");
-        firstVideoId=undefined;
+        opts.firstVideoId=undefined;
     }
 
     // Il doit rester au moins deux vidéos à faire tourner.
@@ -51,28 +61,42 @@ export const vCarousel = (vContainers:string[], firstVideoId?:string) : void =>
         {
             let vContainer=realVContainers[i].containerElt;
             let video=realVContainers[i].videoElt;
-            if((firstVideoId!==undefined && realVContainers[i].id!==firstVideoId) || (firstVideoId===undefined && i!==0) || firstVideoId==="")
+            if((opts.firstVideoId!==undefined && realVContainers[i].id!==opts.firstVideoId) || (opts.firstVideoId===undefined && i!==0) || opts.firstVideoId==="")
                 vContainer.style.display = "none";
             else
-                vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage.
+            {
+                vContainer.style.display = "block";
+                if(opts.firstVideoId!==undefined && opts.playFirstVideo===true)
+                    video.play();                  
+            }
+            var nbTurn=0;
             video.addEventListener("ended", function()
             {
-                vContainer.style.display = "none";
+                // Sauf si demandé en option, le carrousel s'arrête lorsque toutes les vidéos ont été affichées une fois.
-                let nextVContainer: HTMLElement, nextHash: string;
+                if(nbTurn < (nbVContainers-1) || opts.noStop===true)
-                if(i < (nbVContainers-1))
                 {
-                    nextVContainer=realVContainers[i+1].containerElt;
+                    vContainer.style.display = "none";
-                    nextHash=realVContainers[i+1].id;
+                    let nextVContainer: HTMLElement, nextVideo: HTMLMediaElement, nextHash: string;
+                    if(i < (nbVContainers-1))
+                    {
+                        nextVContainer=realVContainers[i+1].containerElt;
+                        nextVideo=realVContainers[i+1].videoElt;
+                        nextHash=realVContainers[i+1].id;
+                    }
+                    else
+                    {
+                        nextVContainer=realVContainers[0].containerElt;
+                        nextVideo=realVContainers[0].videoElt;                   
+                        nextHash=realVContainers[0].id;
+                    }
+                    nextVContainer.style.display = "block";
+                    // On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée.
+                    // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
+                    window.location.assign("#"+nextHash);
+                    if(opts.playNextVideos===true)
+                        nextVideo.play();
+                    nbTurn++;
                 }
-                else
-                {
-                    nextVContainer=realVContainers[0].containerElt;
-                    nextHash=realVContainers[0].id;
-                }
-                nextVContainer.style.display = "block";
-                // On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée.
-                // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
-                window.location.assign("#"+nextHash);
             });
         }
     }