Relecture des script + build.

public/index.html

@@ -11,20 +11,23 @@
 	<h1 id="title">vCarousel</h1>
     <p>Lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée.</p>
 	<figure id="vFunanbule">
-		<video poster="" controls="controls" width="500">
+		<video controls="controls" preload="metadata" width="800">
             <source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>
+            <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p>
         </video>
 		<figcaption>Un clown funanbule !</figcaption>
 	</figure>
 	<figure id="vForgeron">
-		<video poster="" controls="controls" width="500">
+		<video controls="controls" preload="metadata" width="800">
             <source src="videos/Lizio-Poete-Ferrailleur-forgeron.m4v" type="video/mp4"></source>
+            <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p>
         </video>
 		<figcaption>Il faut forger pour devenir forgeron !</figcaption>
 	</figure>
 	<figure id="vCircuit">
-		<video poster="" controls="controls" width="500">
+		<video controls="controls" preload="metadata" width="800">
             <source src="videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v" type="video/mp4"></source>
+            <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p>
         </video>
 		<figcaption>Drôle de circuit !</figcaption>
 	</figure>

src/example.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+/// Exemple d'utilisation de vCarousel avec 3 vidéos
+var vCarousel_1 = require("./vCarousel");
+try {
+    // Liste des id des contenants des vidéos à afficher : 
+    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)
+        vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
+    else
+        vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif
+    // 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("#", ""));
+        });
+    };
+    for (var i = 0; i < selectLinks.length; i++) {
+        _loop_1(i);
+    }
+}
+catch (e) {
+    console.error(e);
+}

src/example.ts

@@ -1,15 +1,15 @@
 /// Exemple d'utilisation de vCarousel avec 3 vidéos
-import { vCarousel } from "./vCarousel.ts";
+import { vCarousel } from "./vCarousel";
 
 try
 {
     // Liste des id des contenants des vidéos à afficher : 
     const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
-    let wantedVideo="";
     if(window.location.hash!==undefined)
-        wantedVideo=window.location.hash.replace("#","");
+        vCarousel(videosContainers, window.location.hash.replace("#",""));
-    vCarousel(videosContainers, wantedVideo);
+    else
+        vCarousel(videosContainers);// le deuxième paramètre est facultatif
     
     // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
     let selectLinks=document.querySelectorAll(".selectVideo");
@@ -18,8 +18,7 @@ try
         let link=<HTMLAnchorElement>selectLinks[i];
         link.addEventListener("click", function(e)
         {
-            wantedVideo=link.hash.replace("#","");
+            vCarousel(videosContainers, link.hash.replace("#",""));
-            vCarousel(videosContainers, wantedVideo);
         });
     }
 }

src/vCarousel.js

@@ -1,6 +1,6 @@
 "use strict";
 /// 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 reste libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel
+/// 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 de la première vidéo à afficher.
 exports.__esModule = true;
 exports.vCarousel = void 0;
@@ -27,7 +27,7 @@ exports.vCarousel = function (vContainers, firstVideoId) {
         console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + firstVideoId + "), mais il n'est pas valide.");
         firstVideoId = "";
     }
-    // Il doit rester au moins deux vidéos
+    // Il doit rester au moins deux vidéos à faire tourner.
     var nbVContainers = realVContainers.length;
     if (nbVContainers < 2)
         console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
@@ -35,10 +35,10 @@ exports.vCarousel = function (vContainers, firstVideoId) {
         var _loop_1 = function (i) {
             var vContainer = realVContainers[i].containerElt;
             var video = realVContainers[i].videoElt;
-            if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId == "" && i !== 0))
+            if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId === "" && i !== 0))
                 vContainer.style.display = "none";
             else
-                vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage
+                vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage.
             video.addEventListener("ended", function () {
                 vContainer.style.display = "none";
                 var nextVContainer, nextHash;
@@ -51,13 +51,13 @@ exports.vCarousel = function (vContainers, firstVideoId) {
                     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
+                // 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 (à revoir)
+                // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
                 window.location.assign("#" + nextHash);
             });
         };
-        // Tous les conteneurs sont cachés, sauf celui demandé
+        // Tous les conteneurs sont cachés, sauf celui demandé.
-        // La fin de lecture d'une vidéo provoque l'affichage du suivant
+        // La fin de lecture d'une vidéo provoque son remplacement par la suivante.
         for (var i = 0; i < nbVContainers; i++) {
             _loop_1(i);
         }

src/vCarousel.ts

@@ -1,5 +1,5 @@
 /// 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 reste libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel
+/// 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 de la première vidéo à afficher.
 
 export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
@@ -36,22 +36,22 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
         firstVideoId="";
     }
 
-    // Il doit rester au moins deux vidéos
+    // Il doit rester au moins deux vidéos à faire tourner.
     let nbVContainers=realVContainers.length;
     if(nbVContainers < 2)
         console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
     else
     {
-        // Tous les conteneurs sont cachés, sauf celui demandé
+        // Tous les conteneurs sont cachés, sauf celui demandé.
-        // La fin de lecture d'une vidéo provoque l'affichage du suivant
+        // La fin de lecture d'une vidéo provoque son remplacement par la suivante.
         for (let i = 0; i < nbVContainers; i++)
         {
             let vContainer=realVContainers[i].containerElt;
             let video=realVContainers[i].videoElt;
-            if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId=="" && i!==0))
+            if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId==="" && i!==0))
                 vContainer.style.display = "none";
             else
-                vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage
+                vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage.
             video.addEventListener("ended", function()
             {
                 vContainer.style.display = "none";
@@ -67,8 +67,8 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
                     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
+                // 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 (à revoir)
+                // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
                 window.location.assign("#"+nextHash);
             });
         }