Introduction
Dans ce laboratoire, vous apprendrez à intégrer et à personnaliser des éléments vidéo en HTML à l’aide de la balise <video>. Vous découvrirez les techniques essentielles pour créer des lecteurs vidéo interactifs : ajouter des contrôles, configurer les sources vidéo, définir des vignettes personnalisées et explorer différents attributs de la balise vidéo afin d’améliorer l’expérience de lecture.
Grâce à une progression étape par étape, vous développerez des compétences pratiques en intégration de vidéos HTML5, depuis la création d’un élément vidéo simple jusqu’à des configurations plus avancées. Vous apprendrez à ajouter plusieurs sources vidéo, à contrôler les paramètres de lecture, à définir des vignettes personnalisées et à créer des expériences vidéo plus attrayantes et conviviales directement dans des pages web.
Créer un élément vidéo de base avec des contrôles
Dans cette étape, vous apprendrez à créer en HTML un élément vidéo de base avec les contrôles essentiels. HTML5 fournit une balise <video> simple et puissante qui permet d’intégrer des vidéos directement dans des pages web.
Commencez par créer un fichier HTML pour tester l’intégration vidéo. Ouvrez le WebIDE et créez un fichier nommé video-demo.html dans le répertoire ~/project.
touch ~/project/video-demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic Video Element</title>
</head>
<body>
<h1>My First Video Element</h1>
<video controls width="640" height="360">
Your browser does not support the video tag.
</video>
</body>
</html>
Voici le rôle des principaux éléments de l’élément vidéo :
- Balise
<video>: conteneur principal pour intégrer du contenu vidéo - Attribut
controls: ajoute les contrôles par défaut du lecteur vidéo (lecture, pause, volume) - Attributs
widthetheight: définissent les dimensions du lecteur vidéo - Texte à l’intérieur de la balise : message de remplacement pour les navigateurs qui ne prennent pas en charge les vidéos HTML5
L’attribut controls est essentiel, car il fournit aux utilisateurs les contrôles de lecture standard : lecture, pause, réglage du volume et mode plein écran.
Remarque : consultez Comment prévisualiser des fichiers HTML dans le WebIDE pour en savoir plus.
Ajouter une source vidéo et désactiver le son
Dans cette étape, vous apprendrez à ajouter des sources vidéo à votre élément vidéo HTML et à contrôler son état de lecture initial. Vous allez modifier le fichier video-demo.html créé précédemment pour y intégrer des sources vidéo et désactiver le son par défaut.
Ouvrez le fichier ~/project/video-demo.html dans le WebIDE et remplacez son contenu par le code suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video Source and Mute</title>
</head>
<body>
<h1>Video with Multiple Sources</h1>
<video controls width="640" height="360" muted>
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
Voici les nouveaux éléments ajoutés :
Balises
<source>: permettent d’indiquer plusieurs formats vidéo afin d’assurer la compatibilité avec différents navigateurs- La première source est un fichier MP4
- La deuxième source est un fichier WebM (format alternatif)
- Le navigateur utilise le premier format pris en charge
Attribut
muted: coupe automatiquement le son au chargement de la vidéo- Utile pour éviter une lecture audio inattendue
- Vous pouvez le supprimer si vous souhaitez activer le son par défaut
Attribut
type: indique le type MIME de la source vidéo- Aide le navigateur à déterminer s’il peut lire la vidéo
Le script d’installation crée localement les deux fichiers vidéo d’exemple afin que l’exemple fonctionne sans dépendre d’un hébergeur vidéo externe. Dans un contexte réel, vous remplaceriez ces fichiers par les chemins de vos propres vidéos.
Utiliser un poster vidéo comme vignette personnalisée
Dans cette étape, vous apprendrez à utiliser l’attribut poster pour ajouter une image de vignette personnalisée à votre élément vidéo avant le début de la lecture. Commencez par télécharger une image d’exemple à utiliser comme poster.
Exécutez la commande suivante pour télécharger une image d’exemple :
wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png
Modifiez ensuite le fichier ~/project/video-demo.html pour ajouter l’attribut poster :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video with Custom Poster</title>
</head>
<body>
<h1>Video with Custom Thumbnail</h1>
<video controls width="640" height="360" muted poster="video-thumbnail.png">
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
Points essentiels concernant l’attribut poster :
- Affiche une image personnalisée avant le début de la lecture vidéo
- Remplace la première image de la vidéo dans l’aperçu
- Permet de créer une interface plus attrayante
- Fonctionne avec des fichiers image locaux ou distants
L’image du poster fournit un aperçu du contenu vidéo et peut améliorer l’expérience utilisateur en donnant du contexte avant le début de la lecture.
Explorer les attributs et les configurations de la balise vidéo
Dans cette étape, vous allez approfondir les différents attributs et configurations disponibles pour l’élément vidéo HTML5. Modifiez le fichier ~/project/video-demo.html pour tester les paramètres avancés suivants :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Video Configurations</title>
</head>
<body>
<h1>Exploring Video Tag Attributes</h1>
<video
controls
width="640"
height="360"
muted
poster="video-thumbnail.png"
preload="metadata"
loop
playsinline
>
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
Examinons les nouveaux attributs :
preload="metadata":- Contrôle le chargement de la vidéo avant sa lecture
- Options :
auto(charge la vidéo entière),metadata(charge uniquement les métadonnées),none(ne précharge pas la vidéo)
loop:- Relance automatiquement la vidéo lorsqu’elle se termine
- Utile pour un contenu d’arrière-plan ou répétitif
playsinline:- Permet de lire la vidéo directement dans la page sur les appareils mobiles
- Empêche le passage automatique en mode plein écran sur les appareils iOS
Vous pouvez également expérimenter avec les attributs suivants :
autoplay: démarre automatiquement la lecture de la vidéocrossorigin: gère les sources vidéo provenant d’une autre originedisablepictureinpicture: empêche l’utilisation du mode image dans l’image
Conseils pratiques :
- Tous les navigateurs ne prennent pas en charge chaque attribut
- Testez toujours votre page sur différents appareils et navigateurs
- Tenez compte de l’expérience utilisateur lorsque vous utilisez
autoplayouloop
Améliorer l’expérience de lecture vidéo
Dans cette étape, vous apprendrez à améliorer l’expérience de lecture vidéo en ajoutant des contrôles personnalisés et une mise en forme. Créez un nouveau fichier ~/project/video-enhanced.html avec le contenu suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Enhanced Video Player</title>
<style>
.video-container {
max-width: 640px;
margin: 0 auto;
position: relative;
}
.custom-controls {
display: flex;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
}
.custom-controls button {
background: none;
border: none;
color: white;
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="video-container">
<video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
<source
src="sample-video.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
<div class="custom-controls">
<button onclick="togglePlay()">Play/Pause</button>
<button onclick="muteToggle()">Mute/Unmute</button>
<input
type="range"
min="0"
max="100"
value="50"
onchange="changeVolume(this.value)"
/>
</div>
</div>
<script>
const video = document.getElementById("myVideo");
function togglePlay() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function muteToggle() {
video.muted = !video.muted;
}
function changeVolume(value) {
video.volume = value / 100;
}
</script>
</body>
</html>
Si vous débutez en CSS et en JavaScript, ne vous inquiétez pas. Cet exemple propose une méthode simple pour créer des contrôles vidéo personnalisés et mettre en forme l’interface du lecteur vidéo.
Améliorations principales de cet exemple :
Contrôles vidéo personnalisés :
- Création d’un panneau de contrôle personnalisé avec des boutons de lecture/pause et de désactivation du son
- Ajout d’un curseur pour régler précisément le volume
Mise en forme CSS :
- Mise en forme du conteneur vidéo et des contrôles
- Utilisation de Flexbox pour la disposition
- Ajout d’un arrière-plan semi-transparent aux contrôles
Interactions JavaScript :
togglePlay(): contrôle manuellement la lecture et la pause de la vidéomuteToggle(): active ou désactive le son de la vidéochangeVolume(): règle le volume de la vidéo par programmation
Cette approche offre davantage de souplesse pour concevoir l’interface d’un lecteur vidéo que les contrôles par défaut du navigateur.
Résumé
Dans ce laboratoire, vous avez appris à intégrer et à personnaliser des éléments vidéo en HTML à l’aide de la balise <video>. Le laboratoire a présenté les techniques essentielles pour créer des lecteurs vidéo interactifs, notamment l’ajout de contrôles de base, la définition de plusieurs sources vidéo et la configuration des paramètres de lecture. Les principales compétences acquises comprennent le réglage des dimensions de la vidéo, la mise en place d’un contenu de remplacement, l’ajout des contrôles du lecteur par défaut, ainsi que la gestion de la désactivation du son et de la sélection des sources vidéo.
Vous avez également exploré des techniques pratiques d’intégration de vidéos HTML5 en créant un élément vidéo de démonstration avec des fonctions standard telles que les contrôles de lecture/pause, la définition de la largeur et de la hauteur, ainsi que la prise en charge de différents formats vidéo. Ce laboratoire vous a permis de vous familiariser avec les attributs de la balise vidéo et d’améliorer l’interaction de l’utilisateur avec du contenu vidéo intégré grâce à différentes options de configuration.
