2021-03-31 17:34:18 +02:00
|
|
|
# vCarousel
|
|
|
|
|
|
2021-04-06 18:52:45 +02:00
|
|
|
Carrousel de vidéos en TypeScript/JavaScript.
|
|
|
|
|
|
|
|
|
|
## Le besoin
|
|
|
|
|
|
|
|
|
|
Plusieurs vidéos sont présentes sur une page web. Nous souhaitons les afficher l'une après l'autre.
|
|
|
|
|
Lorsque la lecture d'une vidéo est achevée, elle disparaît pour faire apparaître la suivante.
|
|
|
|
|
|
|
|
|
|
Il ne s'agit donc pas d'un carrousel servant à faire défiler horizontalement des balises vidéos.
|
|
|
|
|
Mais on peut très bien utiliser ce type de carrousel en parallèle pour naviguer entre les vidéos.
|
2021-04-08 12:41:47 +02:00
|
|
|
Un exemple d'utilisation avec [Flickity](https://www.npmjs.com/package/flickity) est fourni.
|
2021-04-06 18:52:45 +02:00
|
|
|
|
|
|
|
|
## Les grandes lignes de l'algorithme
|
|
|
|
|
|
|
|
|
|
La fonction vCarousel reçoit une liste d'id des conteneurs de vidéos à afficher successivement.
|
2021-04-06 18:54:44 +02:00
|
|
|
Les conteneurs sont des balises dans lesquelles se trouvent les vidéos à traiter. Il peut s'agir de balises div, figure ou autre.
|
2021-04-08 17:37:30 +02:00
|
|
|
En options, la fonction peut aussi recevoir :
|
|
|
|
|
- l'id du conteneur à afficher en premier ou encore une chaîne vide pour en afficher aucun par défaut.
|
|
|
|
|
- un booléen indiquant si la vidéo du premier conteneur doit être lancée automatiquement.
|
|
|
|
|
- un booléen indiquant si les vidéos des conteneurs suivants doivent être lancées automatiquement.
|
|
|
|
|
- un booléen indiquant si on doit continuer à tourner une fois toutes les vidéos affichées.
|
2021-04-06 18:52:45 +02:00
|
|
|
|
|
|
|
|
La première étape consiste à vérifier que les "ids" fournis correspondent bien à des éléments HTML contenant une vidéo.
|
|
|
|
|
Si un id est fourni pour la première vidéo à afficher, on vérifie qu'il fait bien parti des ids des conteneurs valides.
|
|
|
|
|
|
|
|
|
|
Après ces contrôles, s'il reste au moins deux conteneurs valides, on les parcourt pour ne garder affiché que celui indiqué.
|
|
|
|
|
Si aucun id n'est fourni, c'est le premier de la liste qui est affiché par défaut.
|
|
|
|
|
Si une chaîne vide est fournie en deuxième paramètre, aucun conteneur n'est affiché.
|
|
|
|
|
|
2021-04-08 17:37:30 +02:00
|
|
|
De manière asynchrone, on avance ensuite dans la liste des conteneurs en le remplaçant par le suivant lorsque l'a lecture de sa vidéo est finie.
|
|
|
|
|
Lorsqu'on est arrivé au bout de la liste, on s'arrête sauf s'il est demandé de boucler à l'infini.
|
|
|
|
|
La lecture des vidéos est lancée automatiquement si cela est demandé.
|
2021-04-06 18:52:45 +02:00
|
|
|
|
|
|
|
|
## Le code
|
|
|
|
|
|
|
|
|
|
Les scripts sont écrits en TypeScript.
|
|
|
|
|
Vous trouverez la fonction vCarousel et les scripts servant aux exemples dans le répertoire /src.
|
|
|
|
|
Les versions .js présents dans /src sont générées par le compilateur TypeScript.
|
|
|
|
|
Les .js situés dans le répertoire /public sont générés par WebPack. Ils ne servent qu'aux pages d'exemple.
|
