Admin/Dev

03
Avril
2022

Jouer partiellement une vidéo en boucle avec Javascript

Publié par sky

Afin de limiter le poids des vidéos à charger dans un projet, j'ai utilisé une petite astuce permettant de lire une vidéo depuis le début, puis de boucler sur la fin de la vidéo.

Ainsi la vidéo dispose de son introduction, puis, elle tourne infiniment en boucle sur la fin, afin qu'il y ait toujours de l'animation sur le site internet.

Cette astuce se combine à merveille avec la précédente vue en Mars permettant de pré-charger une vidéo. Elle dispose de la même base, puisqu'il faut charger le vidéo en Javascript pour lui appliquer des intérations.

Pour que cela fonctionne, il faut d'abord désactiver la boucle

maVideo.loop = false;

Ensuite, il n'y a plus qu'à ajouter un événement qui se déclenche à la fin de la vidéo

maVideo.onended = function() {
};

Dedans, il suffit de replacer le curseur où l'on souhaite dans la vidéo, et relancer la lecture

maVideo.onended = function() {
    this.currentTime = 6;     this.play();
};

Ici, le curseur est replacé à la 6eme seconde de la vidéo. Attention, ce n'est pas 6 secondes en arrière, mais bien la position dans la vidéo qui est redéfinie.

Si l'astuce est pratique, elle n'est pas exempt de défaut. Déjà, évidemment, il faut, lors du montage de la vidéo prévoir la boucle sur la portion souhaitée. Ensuite, malheureusement, quelque soit le navigateur, il y a une micro coupure de la vidéo, le temps que le curseur soit replacé et la vidéo relancée. Il faut donc le prévoir dans le montage aussi, en ayant un micro-délai neutre. Enfin, la boucle se fait obligatoirement sur le fin de la vidéo.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer