CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery

Gestion de la Vidéo en JavaScript

Retour à la formation
Chapitre 4 Leçon 1
Précédent
Suivant

Apprenez à gérer la vidéo en JavaScript en créant vos propres contrôles de lecture. Maîtrisez les commandes play, pause, et stop.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez les différentes commandes JavaScript pour gérer une vidéo. Plutôt que d’utiliser les contrôleurs par défaut avec les boutons classiques de pause, lecture et arrêt, vous allez découvrir comment créer votre propre interface personnalisée. Cette interface comprendra des boutons faits maison ainsi qu’une barre de progression interactive. Vous verrez comment afficher la durée totale de la vidéo et le temps de lecture courant.

Nous abordons également la configuration initiale du code HTML et de la mise en forme CSS, et nous passerons ensuite à l'écriture du script avec jQuery. Vous apprendrez à identifier et manipuler les éléments vidéo, et à initialiser la barre de progression. La leçon détaillera ensuite comment implémenter les boutons de contrôle de la vidéo en utilisant des méthodes pratiques et efficaces de jQuery.

Objectifs de cette leçon

L'objectif principal de cette vidéo est de vous apprendre à créer et gérer des contrôles vidéo personnalisés en JavaScript et jQuery.

Prérequis pour cette leçon

Une compréhension de base de JavaScript et des notions fondamentales en HTML/CSS est nécessaire pour suivre cette leçon.

Métiers concernés

Ce sujet est particulièrement pertinent pour les développeurs front-end, les ingénieurs web et les concepteurs de sites Internet.

Alternatives et ressources

Vous pouvez également utiliser des librairies comme Video.js pour gérer les vidéos sur vos pages web.

Questions & Réponses

Les sources mentionnées sont MP4 pour Safari, OGV pour Firefox, et des formats compatibles avec Chrome.
La taille initiale de la barre de progression est définie avec la commande .css('width', '0') en jQuery.
En JavaScript, il n'existe pas de méthode 'stop' pour les vidéos, donc on utilise la méthode 'pause' et on remet le temps courant à zéro avec currentTime = 0.