Introduction
Dans ce laboratoire (lab), les participants apprendront à intégrer et personnaliser des éléments vidéo dans le HTML en utilisant la puissante balise <video>. Le laboratoire couvre les techniques essentielles pour créer des lecteurs vidéo interactifs, notamment l'ajout de contrôles, la configuration des sources vidéo, la mise en œuvre de vignettes personnalisées et l'exploration de diverses attributs de la balise vidéo pour améliorer l'expérience de lecture.
Grâce à une approche étape par étape, les apprenants acquerront des compétences pratiques dans l'intégration de vidéos HTML5, depuis la création d'éléments vidéo de base jusqu'aux configurations avancées. Les participants découvriront comment 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 les pages web.
Créer un élément vidéo de base avec des contrôles
Dans cette étape, vous apprendrez à créer un élément vidéo de base en HTML avec les contrôles essentiels. HTML5 propose une balise <video> simple et puissante qui vous permet d'intégrer directement des vidéos dans les pages web.
Tout d'abord, créons un fichier HTML pour démontrer l'intégration de vidéo. Ouvrez le WebIDE et créez un nouveau 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>
Décortiquons les éléments clés de l'élément vidéo :
- Balise
<video>: Le conteneur principal pour intégrer le 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 secours pour les navigateurs qui ne prennent pas en charge la vidéo HTML5.
L'attribut controls est crucial car il offre aux utilisateurs des contrôles de lecture standard tels que la lecture, la pause, le réglage du volume et le mode plein écran.
Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.
Ajouter une source vidéo et activer la sourdine lors de la lecture
Dans cette étape, vous apprendrez à ajouter des sources vidéo à votre élément vidéo HTML et à contrôler son état de lecture initial. Nous allons modifier le fichier video-demo.html précédent pour inclure des sources vidéo et démontrer comment désactiver le son de la vidéo par défaut.
Ouvrez le fichier ~/project/video-demo.html dans le WebIDE et mettez à jour son contenu :
<!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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
type="video/mp4"
/>
<source
src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
Décortiquons les nouvelles ajouts :
Balises
<source>: Vous permettent de spécifier plusieurs formats vidéo pour assurer la compatibilité entre navigateurs- La première source est un fichier MP4
- La deuxième source est un fichier WebM (format alternatif)
- Les navigateurs utiliseront le premier format pris en charge
Attribut
muted: Désactive automatiquement le son de la vidéo lorsqu'elle est chargée- Utile pour éviter une lecture audio inattendue
- Peut être supprimé si vous souhaitez avoir le son par défaut
Attribut
type: Spécifie le type MIME de la source vidéo- Aide les navigateurs à déterminer s'ils peuvent lire la vidéo
Les URL des vidéos d'exemple sont des vidéos d'exemple en domaine public qui démontrent plusieurs formats de source. Dans un scénario réel, vous remplaceriez ces URL par les chemins de vos propres fichiers vidéo.
Implémenter une affiche vidéo pour une miniature 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émarrage de la lecture. Tout d'abord, téléchargeons une image d'exemple à utiliser comme affiche.
Utilisez 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
Maintenant, mettez à jour le fichier ~/project/video-demo.html avec 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
type="video/mp4"
/>
<source
src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
Points clés concernant l'attribut poster :
- Affiche une image personnalisée avant le démarrage de la lecture de la vidéo
- Remplace la première image de la vidéo comme aperçu
- Aide à créer une interface utilisateur plus attrayante
- Fonctionne avec des fichiers d'images locaux ou distants
L'image d'affiche fournit un aperçu du contenu vidéo et peut améliorer l'expérience utilisateur en donnant un contexte avant le démarrage de la lecture.
Explorer les attributs et les configurations de la balise vidéo
Dans cette étape, vous allez approfondir vos connaissances sur les différents attributs et configurations disponibles pour l'élément vidéo HTML5. Mettez à jour le fichier ~/project/video-demo.html pour explorer ces paramètres avancés :
<!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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
type="video/mp4"
/>
<source
src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
Explorons les nouveaux attributs :
preload="metadata":- Contrôle la façon dont la vidéo est chargée avant la lecture
- Options :
auto(charger la vidéo entière),metadata(charger uniquement les métadonnées),none(ne pas précharger)
loop:- Fait rejouer automatiquement la vidéo lorsqu'elle se termine
- Utile pour les contenus d'arrière - plan ou répétitifs
playsinline:- Permet de lire la vidéo en ligne sur les appareils mobiles
- Empêche le mode plein écran automatique sur les appareils iOS
Autres attributs utiles avec lesquels vous pouvez expérimenter :
autoplay: Démarre automatiquement la lecture de la vidéocrossorigin: Gère les sources vidéo provenant d'un autre domainedisablepictureinpicture: Empêche le mode fenêtre vidéo flottante (picture - in - picture)
Conseils professionnels :
- Tous les navigateurs ne prennent pas en charge tous les attributs
- Testez toujours sur différents appareils et navigateurs
- Pensez à l'expérience utilisateur lorsque vous utilisez l'autoplay ou la boucle
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 un style. 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.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>
N'ayez pas peur si vous êtes nouveau dans le domaine du CSS et du JavaScript. Cet exemple propose une façon simple de créer des contrôles vidéo personnalisés et de styliser l'interface du lecteur vidéo.
Améliorations clés dans cet exemple :
Contrôles vidéo personnalisés :
- Créer un panneau de contrôle personnalisé avec des boutons de lecture/pause et de mise en sourdine
- Ajouter un curseur de volume pour un contrôle précis du volume
Stylage CSS :
- Styler le conteneur vidéo et les contrôles
- Utiliser le modèle de disposition flexbox
- Ajouter un arrière - plan semi - transparent aux contrôles
Interactions JavaScript :
togglePlay(): Contrôler manuellement la lecture/pause de la vidéomuteToggle(): Basculer l'état de mise en sourdine de la vidéochangeVolume(): Ajuster le volume de la vidéo par programmation
Cette approche vous offre plus de flexibilité dans la conception des interfaces de lecteur vidéo par rapport aux contrôles par défaut des navigateurs.
Résumé
Dans ce laboratoire (lab), les participants ont appris à intégrer et personnaliser des éléments vidéo dans le HTML en utilisant la balise <video>. Le laboratoire a couvert les techniques essentielles pour créer des lecteurs vidéo interactifs, notamment l'ajout de contrôles de base, la spécification de plusieurs sources vidéo et la configuration des paramètres de lecture. Les compétences clés acquises incluent la définition des dimensions de la vidéo, la mise en œuvre de contenu de secours, l'ajout de contrôles de lecteur par défaut, ainsi que la gestion de la mise en sourdine de la vidéo et de la sélection des sources.
Les participants ont exploré des techniques pratiques d'intégration de vidéos HTML5 en créant un élément vidéo de démonstration avec des fonctionnalités standard telles que les contrôles de lecture/pause, la configuration de la largeur et de la hauteur, et la prise en charge de différents formats vidéo. Le laboratoire a offert une expérience pratique pour comprendre les attributs de la balise vidéo et améliorer l'interaction de l'utilisateur avec le contenu vidéo intégré grâce à diverses options de configuration.
