La situation initiale

Avec d’autres membres de la société OnCIMè, nous avons souhaité enregistrer plusieurs courtes vidéos présentant notre activité et les projets pour lesquels nous cherchons de nouveaux financeurs. La question s’est posée de savoir comment nous allions afficher ces vidéos sur notre site. Il était possible de les afficher simplement les unes sous les autres et de laisser l’internaute les parcourir à sa guise, mais nous avons préféré un affichage plus fluide et pratique, notamment sur mobile. Notre site utilisant le CMS Wordpress, nous avons au final utilisé une des nombreuses extensions proposées par ce logiciel. Vous pouvez voir le résultat ici.

Ceci dit, on peut avoir un besoin similaire pour construire sa propre application. De plus, j’avais en tête un fonctionnement un peu différent où l’affichage s’enchaînerait d’une vidéo à l’autre. J’ai donc décidé de créer vCarousel, même je n’en ai pas besoin dans l’immédiat.

Lecture successive de vidéos

vCarousel a donc un fonctionnement différent. Son principe est très simple : lorsque la lecture d’une des vidéos présentes dans le page est achevée, la vidéo disparaît pour laisser place à la suivante. Ce n’est donc pas un carrousel tel que nous avons l’habitude de les voir, qui font défiler des images ou slogans, avec en général des flèches permettant de naviguer parmi les éléments proposés. Si c’est ce que vous cherchez, il existe de nombreux modules JavaScript permettant de faire cela et le fait d’afficher des vidéos à la place d’images dans les éléments défilant ne change pas grand-chose. Il vous faudra juste bloquer le défilement des vidéos lorsque l’internaute lancera la lecture de l’une d’entre elles.

Le fonctionnement de vCarousel est différent et consiste donc à afficher une vidéo lorsque la lecture de la précédente est achevée. En fait avec vCarousel, ce sont les conteneurs HTML dans lesquels se trouvent les vidéos qui s’affichent. Je me suis effectivement dit qu’il sera le plus souvent souhaitable d’afficher des informations connexes à la vidéo (titre, légende…). Sans cela le script aurait pu se limiter à changer la source (attribut src) de la première vidéo une fois sa lecture achevée. Cela aurait même été encore plus fluide.

Options et personnalisations

Ordre de défilement

L’ordre dans lequel les vidéos s’affichent successivement peut être différent de celui où elles sont présentes dans le HTML et il est possible d’afficher plusieurs fois la même vidéo dans un même « tour » de carrousel.

Première vidéo affichée

Il est possible de préciser la première vidéo à afficher, si elle est différente de la première de la liste fournie au script. Ceci peut être utile lorsqu’un lien ciblant une des vidéos est transmis à d’autres personnes. vCarousel modifie en effet l’URL au fil de son avancement, de manière à permettre ce type de partage ciblé. On peut aussi choisir d’afficher aucune vidéo par défaut. Cela peut par exemple être le cas si on souhaite laisser à l’internaute le choix de la première vidéo à afficher.

Boucle infinie

Par défaut le carrousel s’arrête une fois le « tour » complété, mais une option vous permet de reprendre à la première vidéo et de tourner ainsi à l’infini.

Lecture automatique

Ce n’est pas forcément une pratique recommandée et sachez que cela peut être bloqué par le navigateur de l’internaute, mais il est possible de demander la lecture automatique de la première vidéo et/ou de celles s’affichant par la suite.

Code et exemples

Je vous redonne le lien vers le dépôt Git. Le texte de la page d’accueil du dépôt vous présente succinctement vCarousel et les grandes lignes de son algorithme.

Le répertoire /public vous donne deux exemples d’utilisation que vous devriez pouvoir tester directement dans votre navigateur internet. Pour ce faire, après avoir téléchargé l’ensemble du répertoire sur votre machine, cliquez simplement sur index.html qui affiche un exemple d’utilisation basique de vCarousel. Un deuxième exemple associe vCarousel à Flickity, un script de carrousel au sens plus classique permettant ici de choisir la première vidéo à afficher. Le carrousel d’images Flickity est ensuite synchronisé sur l’avancement de vCarousel.

Le code de la fonction vCarousel à proprement parler est écrit en TypeScript et trouvable dans le répertoire /src. Il s’agit du fichier vCarousel.ts qui est écrit de manière à être importé dans un autre script (module). Le répertoire /src contient aussi une version JavaScript de vCarousel, mais elle est générée par le compilateur de TypeScript. J’en suis donc l’auteur indirect. Enfin dans ce même répertoire vous trouverez les versions TypeScript et JavaScript des exemples d’utilisation.

TypeScript ?

TypeScript est une surcouche de JavaScript permettant de spécifier les types des données manipulés, ce qui peut vous éviter pas mal d’erreurs de développement et d’intégration… Il permet aussi d’utiliser certaines fonctionnalités JavaScript non encore supportées par tous les navigateurs, même si ce dernier point est de moins en moins vrai avec la généralisation des versions 6 et 7 d’ECMAScript. Intérêt non négligeable, TypeScript vous permet de compiler votre code dans un JavaScript compatible avec des navigateurs ne supportant qu’ECMAScript 5. C’est le choix que j’ai fait et c’est moins lourd que l’utilisation de Babel.js !

Le code JavaScript final que vous trouvez dans le répertoire /public est généré par WebPack. Il n’est pas des plus digestes, même si j’ai choisi de ne pas le minifier…

Tests

J'ai ajouté un script de tests automatisés qui sont réalisés via Jasmine.js, couplé à Karma.js. Après quelques recherches, j'ai trouvé le moyen de les utiliser en utilisant du code TypeScript. Vous trouverez mon fichier de "specs" dans le répertoire /tests.

Licence d’utilisation de vCarousel

vCarousel est partagé sous GNU Affero General Public License. Elle vous donne le droit d’utiliser, modifier, distribuer le code de vCarousel, comme vous le souhaitez. Votre seule contrainte est de laisser ces mêmes droits aux utilisateurs de votre version du script, qu’elle soit modifiée ou non. N’hésitez à vous appropriez le code et à l’adapter à vos besoins.

À noter que je n’assure aucun support quant à son utilisation et que je ne peux pas forcément passer du temps à l’adapter à votre situation… Rappelons-le, « libre » n’est pas synonyme de « bénévolat », ni de « gratuité », mais plutôt de réappropriation et partage. Ceci dit, au besoin, contactez-moi pour m’expliquer votre situation ou encore suggérer des améliorations, etc.

Illustration de l’article : il s’agit d’une de mes photos des créations de Poète Ferrailleur de Lizio. Vous trouverez aussi des vidéos prises sur place pour illustrer les exemples d’utilisation de vCarousel :)