Description plus complète du script.
This commit is contained in:
parent
f7a58cf399
commit
6c48b20eb0
33
README.md
33
README.md
@ -1,3 +1,34 @@
|
|||||||
# vCarousel
|
# vCarousel
|
||||||
|
|
||||||
Carrousel de vidéos en TypeScript/JavaScript.
|
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.
|
||||||
|
|
||||||
|
## 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 (<video>) à traiter. Il peut s'agir de balises <div>, <figure> ou autre.
|
||||||
|
En option, 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.
|
||||||
|
|
||||||
|
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é.
|
||||||
|
|
||||||
|
De manière asynchrone, on avance ensuite dans la liste des conteneurs en le remplacant par le suivant lorsque l'a lecture de sa vidéo est finie.
|
||||||
|
Lorsqu'on est arrivé au bout de la liste, on repasse au premier et ainsi de suite.
|
||||||
|
|
||||||
|
## 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.
|
Loading…
Reference in New Issue
Block a user