Fab_Blab/vCarousel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Revue des textes d'explications du fait des nouvelles options.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-04-08 17:37:30 +02:00
parent 0e951963be
commit 1acf381512
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -15,7 +15,11 @@ Un exemple d'utilisation avec [Flickity](https://www.npmjs.com/package/flickity)
La fonction vCarousel reçoit une liste d'id des conteneurs de vidéos à afficher successivement. 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. Les conteneurs sont des balises dans lesquelles se trouvent les vidéos à 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. 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. 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. 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.
@ -24,8 +28,9 @@ Après ces contrôles, s'il reste au moins deux conteneurs valides, on les parco
Si aucun id n'est fourni, c'est le premier de la liste qui est affiché par défaut. 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é. 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. 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 repasse au premier et ainsi de suite. 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 ## Le code

2
public/flickity.html
View File

@ -13,7 +13,7 @@
<body> <body>
<div id="videos"> <div id="videos">
<h1 id="title">vCarousel</h1> <h1 id="title">vCarousel</h1>
<p>Dans cet exemple vCarousel est associé à un carrousel d'images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l'affichage de Flickity.</p> <p>Dans cet exemple vCarousel est associé à un carrousel d'images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l'affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement.</p>
<figure id="vFunanbule"> <figure id="vFunanbule">
<video controls preload="metadata"> <video controls preload="metadata">

2
public/index.html
View File

@ -12,7 +12,7 @@
<body> <body>
<div id="videos"> <div id="videos">
<h1>vCarousel</h1> <h1>vCarousel</h1>
<p>Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.</p> <p>Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. Lorsqu'une vidéo est sélectionné dans le menu, sa lecture se lance automatiquement. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.</p>
<figure id="vFunanbule"> <figure id="vFunanbule">
<video controls="controls" preload="metadata" width="800"> <video controls="controls" preload="metadata" width="800">