Carrousel de vidéos en TypeScript/JavaScript. https://www.le-fab-lab.com/vcarousel.html
Go to file
Fabrice PENHOËT 3969bff238 Lorsque l'on passe à la vidéo suivante, sa durée de lecture est réinitialisée. 2022-01-18 17:36:40 +01:00
public Adaptation chemins output webpack.config.js + nouvelle compilation 2021-09-03 11:36:07 +02:00
src Lorsque l'on passe à la vidéo suivante, sa durée de lecture est réinitialisée. 2022-01-18 17:36:40 +01:00
tests Lorsque l'on passe à la vidéo suivante, sa durée de lecture est réinitialisée. 2022-01-18 17:36:40 +01:00
.gitignore Ajout d'un répertoire à ignorer. 2022-01-18 15:51:08 +01:00
LICENSE Initial commit 2021-03-31 17:34:18 +02:00
README.md Adaptation du texte de présentation du projet pour prendre en compte le déplacement des fichiers .js compilés. 2021-08-04 16:18:14 +02:00
karma.conf.js Modification configuration karma.js pour fermer les navigateurs une fois les tests terminés 2021-08-04 16:20:14 +02:00
package-lock.json Mise à jour des dépendances 2022-01-18 15:51:31 +01:00
package.json Lorsque l'on passe à la vidéo suivante, sa durée de lecture est réinitialisée. 2022-01-18 17:36:40 +01:00
tsconfig.json Modification du fichier de configuration de TypeScript (notamment mode STRICT) + adaptation de la classe vCarousel 2021-08-03 18:19:50 +02:00
webpack.config.js Adaptation chemins output webpack.config.js + nouvelle compilation 2021-09-03 11:36:07 +02:00

README.md

vCarousel

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. Un exemple d'utilisation avec Flickity est fourni.

Les grandes lignes de l'algorithme

La fonction vCarousel reçoit une liste d'id des conteneurs de vidéos à afficher successivement. Les conteneurs sont des balises dans lesquelles se trouvent les vidéos à traiter. Il peut s'agir de balises div, figure ou autre. 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.

La première étape consiste à vérifier que les "ids" fournis correspondent bien à des éléments HTML contenant une vidéo. On vérifie aussi qu'il y a au moins deux "ids" de conteneurs valides fournis. 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, on parcourt les conteneurs 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, aucun conteneur n'est affiché.

De manière asynchrone, on avance ensuite dans la liste des conteneurs en remplaçant le conteneur actuel 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é.

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/build 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. Des tests automatisés utilisant les modules karma.js et jasmine.js sont présents dans le répertoire /tests.