Introduction à l'API Vidéo et CSS3
Objectifs
Les objectifs de cette vidéo sont :
- Apprendre à insérer une vidéo dans une page HTML en utilisant l'API vidéo HTML5.
- Mettre en place des boutons de contrôle pour la vidéo (Play, Pause, Stop).
- Afficher la durée totale et le temps écoulé de la vidéo.
- Créer des transitions de taille de vidéo avec CSS3.
Résumé
Apprenez à intégrer des vidéos dans vos pages HTML en utilisant l'API vidéo de HTML5, en mettant en place des boutons de contrôle et en ajoutant des transitions CSS3 pour agrandir et réduire la vidéo.
Description
Dans cette leçon, nous explorons comment utiliser l'API vidéo HTML5 pour insérer et contrôler des vidéos au sein de notre page HTML. Nous allons ajouter des boutons de contrôle tels que Play, Pause et Stop, ainsi que des éléments d'affichage pour la durée totale et le temps écoulé de la vidéo. Nous mettrons également en place une barre de progression dynamique.
De plus, nous montrerons comment HTML5 permet maintenant d'incorporer des vidéos directement avec la balise <video>, contrairement aux versions précédentes qui nécessitaient les balises <object> ou <embed>. Cette nouvelle approche permet une meilleure intégration de la vidéo au sein de la page et facilite les manipulations à partir de CSS et JavaScript.
Nous implémenterons une fonctionnalité avancée, en utilisant CSS3 pour créer une transition qui permet de réduire et d'agrandir la vidéo par simple clic sur un bouton. Cette transition sera spécifiquement conçue pour fonctionner dans les navigateurs compatibles, notamment Safari.
Questions fréquentes
Programme détaillé
Module 1 - Introduction
Module 2 - LES FONDAMENTAUX ET TECHNIQUES AVANCEES DU HTML/XHTML
Module 3 - LES BASES DU HTML5 et les propriétés CSS3 courantes
Module 4 - HTML5 : Les nouvelles et autres balises html5
Module 5 - ANNEXES
Module 6 - Travailler en HTML5 et CSS3 avec les nouvelles balises et propriétés
Module 7 - Les nouveaux API du HTML5 (javascript)
Module 8 - Conclusion
