Regarder une vidéo sur un site web est aujourd’hui une chose banale. Mais avez-vous déjà remarqué à quel point un lecteur vidéo bien conçu peut rendre l’expérience plus agréable ? Couleurs adaptées au site, boutons élégants, animations fluides, ou encore commandes simplifiées : tout cela contribue à une navigation fluide et professionnelle.
La bonne nouvelle, c’est qu’il est tout à fait possible de créer son propre lecteur vidéo HTML5, sans dépendre d’un lecteur externe comme YouTube ou Vimeo. Cela permet non seulement d’avoir un design 100 % personnalisé, mais aussi de garder le contrôle sur l’ergonomie, la marque et les performances de votre site.
Dans ce tutoriel complet, nous allons créer ensemble un lecteur vidéo moderne et personnalisé avec HTML5, CSS et JavaScript. Vous apprendrez à :
- insérer une vidéo avec la balise
<video>; - concevoir un lecteur stylisé grâce au CSS ;
- ajouter vos propres boutons de lecture, pause, volume et barre de progression ;
- comprendre comment JavaScript interagit avec les médias.
Le tout, étape par étape, en expliquant chaque notion pour que même un débutant puisse suivre.
- Comprendre la balise
- Créer la structure de base
- Styliser le lecteur vidéo avec CSS
- Rendre le lecteur interactif avec JavaScript
- Ajouter le contrôle du volume
- Ajouter un bouton plein écran
- Rendre la barre de progression plus esthétique
- Ajouter des animations CSS
- Rendre le lecteur responsive
- Ajouter du confort pour l’utilisateur
- Optimiser les performances et l’accessibilité
- Ajouter des fonctionnalités bonus (optionnelles)
- Améliorer l’apparence générale
Comprendre la balise <video>
Présentation de la balise <video>
Introduite avec HTML5, la balise <video> a révolutionné la façon d’intégrer des vidéos sur le web. Avant elle, les développeurs devaient passer par des lecteurs externes comme Flash Player ou QuickTime, ce qui posait des problèmes de compatibilité et de performance.
Aujourd’hui, avec une simple ligne de code, vous pouvez afficher une vidéo dans votre page :
<video src="ma-video.mp4" controls></video>Ce code suffit à faire apparaître un lecteur vidéo complet, avec les boutons standards (lecture, pause, volume, etc.).
Attributs essentiels de <video>
La balise <video> dispose de plusieurs attributs utiles :
src: définit le chemin vers votre fichier vidéo (local ou en ligne).controls: affiche le lecteur par défaut du navigateur.autoplay: démarre la vidéo automatiquement (souvent bloqué par les navigateurs).loop: rejoue la vidéo en boucle.muted: démarre la vidéo sans son.poster: définit une image d’aperçu avant la lecture.
Exemple :
<video src="demo.mp4" controls poster="miniature.jpg" width="640" height="360"></video>Vous voyez que c’est très simple ! Mais dans ce tutoriel, nous allons désactiver les contrôles par défaut pour créer les nôtres.
Créer la structure de base
Préparer le fichier HTML
Commençons par une page HTML basique :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lecteur vidéo personnalisé</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="video-container">
<video id="maVideo" src="media/video.mp4"></video>
<div class="controls">
<button id="playPause">▶️</button>
<input type="range" id="progress" value="0" min="0" max="100">
<button id="mute">🔈</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Cette structure contient trois éléments essentiels :
- la balise
<video>qui affiche notre média, - une
<div>contenant les contrôles personnalisés, - un lien vers un fichier CSS et un fichier JavaScript externes.
Organiser les fichiers
Créez un dossier pour votre projet, par exemple :
mon-lecteur-video/
│
├── index.html
├── style.css
├── script.js
└── media/
└── video.mp4C’est une organisation simple et claire. Le dossier media contient les fichiers vidéo, tandis que style.css gère l’apparence et script.js la logique interactive.
Styliser le lecteur vidéo avec CSS
Cacher les contrôles par défaut
Nous avons volontairement omis l’attribut controls dans la balise <video>, car nous voulons gérer nous-mêmes les boutons. Pour donner une apparence moderne, ajoutons du style.
Ouvrez style.css et commencez par ceci :
body {
background-color: #1e1e1e;
font-family: Arial, sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.video-container {
position: relative;
width: 640px;
max-width: 90%;
background-color: #000;
border-radius: 10px;
overflow: hidden;
}
video {
width: 100%;
display: block;
}Le conteneur est centré, avec des bords arrondis et un fond noir.
Ajouter le style des boutons
Nous allons maintenant styliser les boutons et la barre de progression :
.controls {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
button {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
transition: transform 0.2s ease;
}
button:hover {
transform: scale(1.2);
}
input[type="range"] {
flex: 1;
margin: 0 10px;
cursor: pointer;
}Ce style rend notre lecteur plus élégant et plus ergonomique. Les boutons s’agrandissent légèrement lorsqu’on les survole, ce qui donne un effet dynamique.
Rendre le lecteur interactif avec JavaScript
Maintenant que tout est en place visuellement, nous allons ajouter la logique.
Ouvrez le fichier script.js :
const video = document.getElementById('maVideo');
const playPauseBtn = document.getElementById('playPause');
const muteBtn = document.getElementById('mute');
const progress = document.getElementById('progress');Nous commençons par récupérer chaque élément du DOM.
4.1 – Lecture et pause
Nous allons maintenant gérer le bouton de lecture :
playPauseBtn.addEventListener('click', () => {
if (video.paused || video.ended) {
video.play();
playPauseBtn.textContent = '⏸️';
} else {
video.pause();
playPauseBtn.textContent = '▶️';
}
});Le code est simple :
- Si la vidéo est en pause, on la lit.
- Sinon, on la met en pause.
- Le symbole du bouton change en conséquence.
Mettre à jour la barre de progression
Chaque fois que la vidéo avance, nous voulons que la barre de progression reflète le temps écoulé :
video.addEventListener('timeupdate', () => {
const pourcentage = (video.currentTime / video.duration) * 100;
progress.value = pourcentage;
});Le navigateur déclenche timeupdate plusieurs fois par seconde, ce qui permet une mise à jour fluide.
Et pour permettre à l’utilisateur de cliquer dans la barre et de se déplacer dans la vidéo :
progress.addEventListener('input', () => {
const nouveauTemps = (progress.value * video.duration) / 100;
video.currentTime = nouveauTemps;
});Activer et désactiver le son
Pour finir ce premier niveau de personnalisation, gérons le bouton muet :
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
muteBtn.textContent = video.muted ? '🔇' : '🔈';
});Ce code coupe ou réactive le son et met à jour l’icône du bouton.
Ajouter le contrôle du volume
Comprendre la propriété volume
En HTML5, la balise <video> possède une propriété JavaScript appelée volume.
Sa valeur varie entre 0 (muet) et 1 (volume maximum).
Pour permettre à l’utilisateur de régler le volume manuellement, nous allons ajouter une barre de volume.
Modifions la partie HTML des contrôles :
<div class="controls">
<button id="playPause">▶️</button>
<input type="range" id="progress" value="0" min="0" max="100">
<button id="mute">🔈</button>
<input type="range" id="volume" min="0" max="1" step="0.05" value="1">
</div>Ici, l’attribut step="0.05" permet d’ajuster finement le volume.
Ajouter le script pour le volume
Dans le fichier script.js, ajoutons :
const volumeSlider = document.getElementById('volume');
volumeSlider.addEventListener('input', () => {
video.volume = volumeSlider.value;
video.muted = video.volume === 0;
muteBtn.textContent = video.muted ? '🔇' : '🔈';
});Chaque fois que la valeur de la barre change, le volume de la vidéo s’ajuste instantanément. Si le volume tombe à 0, l’icône passe automatiquement en mode muet.
Styliser la barre de volume
Dans style.css, ajoutons un style sobre et moderne :
#volume {
width: 100px;
accent-color: #00b4d8;
}L’attribut accent-color (supporté par la plupart des navigateurs récents) permet de changer la couleur du curseur et de la piste.
Ajouter un bouton plein écran
Le mode plein écran avec JavaScript
HTML5 permet d’afficher n’importe quel élément en plein écran grâce à la méthode requestFullscreen(). Nous allons l’utiliser sur notre conteneur vidéo.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Ajoutons un bouton :
<button id="fullscreen">⛶</button>Et dans le script :
const fullscreenBtn = document.getElementById('fullscreen');
const container = document.querySelector('.video-container');
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
container.requestFullscreen();
fullscreenBtn.textContent = '🡼';
} else {
document.exitFullscreen();
fullscreenBtn.textContent = '⛶';
}
});Ce code vérifie si le mode plein écran est actif et bascule entre les deux états.
Styliser le bouton plein écran
Ajoutons-le dans le CSS :
#fullscreen {
font-size: 18px;
}Simple, mais suffisant pour garder une cohérence visuelle avec les autres boutons.
Rendre la barre de progression plus esthétique
La barre par défaut fonctionne, mais elle manque de style.
Nous allons la personnaliser à l’aide du CSS moderne.
#progress {
appearance: none;
height: 6px;
border-radius: 5px;
background: #333;
overflow: hidden;
}
#progress::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #00b4d8;
cursor: pointer;
}Ici, nous utilisons les pseudo-éléments ::-webkit-slider-thumb pour styliser le curseur (compatible Chrome, Edge, Safari). Pour Firefox, on peut ajouter :
#progress::-moz-range-thumb {
background: #00b4d8;
border: none;
border-radius: 50%;
width: 12px;
height: 12px;
}Ainsi, le lecteur aura le même rendu sur tous les navigateurs.
Ajouter des animations CSS
Un lecteur fluide donne toujours une meilleure impression. Nous allons donc ajouter quelques transitions simples.
Par exemple, lorsque la souris survole le lecteur, nous allons faire apparaître les contrôles :
.video-container .controls {
opacity: 0;
transition: opacity 0.4s ease;
}
.video-container:hover .controls {
opacity: 1;
}Ce petit effet donne une impression de légèreté et de professionnalisme.
Rendre le lecteur responsive
Aujourd’hui, il est essentiel qu’un lecteur vidéo s’adapte à toutes les tailles d’écran, notamment aux smartphones.
Heureusement, avec un peu de CSS, c’est très simple :
.video-container {
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
}
.controls {
flex-wrap: wrap;
}
#progress {
flex: 1 1 100%;
margin-top: 10px;
}Grâce à aspect-ratio, la vidéo garde toujours la bonne proportion, et les contrôles se réorganisent automatiquement sur petits écrans.
Ajouter du confort pour l’utilisateur
Mettre en pause ou relancer en cliquant sur la vidéo
Un détail souvent apprécié : pouvoir cliquer sur la vidéo pour la lire ou la mettre en pause.
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = '⏸️';
} else {
video.pause();
playPauseBtn.textContent = '▶️';
}
});Cela améliore grandement l’expérience utilisateur, notamment sur mobile.
Afficher le temps écoulé et le temps total
Pour rendre le lecteur plus complet, ajoutons un indicateur de temps.
Modifions le HTML :
<div class="controls">
<button id="playPause">▶️</button>
<span id="time">00:00 / 00:00</span>
<input type="range" id="progress" value="0" min="0" max="100">
<button id="mute">🔈</button>
<input type="range" id="volume" min="0" max="1" step="0.05" value="1">
<button id="fullscreen">⛶</button>
</div>Et dans le JS :
const timeDisplay = document.getElementById('time');
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
video.addEventListener('loadedmetadata', () => {
timeDisplay.textContent = `00:00 / ${formatTime(video.duration)}`;
});
video.addEventListener('timeupdate', () => {
const current = formatTime(video.currentTime);
const total = formatTime(video.duration);
timeDisplay.textContent = `${current} / ${total}`;
});Résultat : le temps s’affiche et se met à jour automatiquement.
Optimiser les performances et l’accessibilité
Formats vidéo compatibles
Tous les navigateurs ne lisent pas les mêmes formats vidéo.
Les plus universels sont :
.mp4(H.264 ou H.265).webm.ogg
Il est conseillé de fournir plusieurs sources dans la balise <video> :
<video id="maVideo">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
Votre navigateur ne supporte pas la lecture vidéo.
</video>Ainsi, le navigateur choisit automatiquement le format qu’il peut lire.
Accessibilité et bonnes pratiques
Pour rendre le lecteur plus accessible :
- Ajoutez des titres ou descripteurs ARIA sur les boutons.
- Fournissez des sous-titres via la balise
<track>.
Exemple :
<track src="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">Les sous-titres améliorent non seulement l’accessibilité, mais aussi le référencement SEO, car ils apportent du contenu textuel lié à la vidéo.
Ajouter des fonctionnalités bonus (optionnelles)
Lecture automatique après chargement
Vous pouvez démarrer la vidéo dès son chargement :
video.autoplay = true;
video.muted = true; // obligatoire sur certains navigateursMais attention : pour éviter un effet intrusif, ne le faites que si cela a du sens (par exemple sur une page de démonstration).
Sauvegarder la position de lecture
Pour offrir un confort supplémentaire, sauvegardons la position de lecture dans le navigateur :
video.addEventListener('timeupdate', () => {
localStorage.setItem('positionVideo', video.currentTime);
});
window.addEventListener('load', () => {
const position = localStorage.getItem('positionVideo');
if (position) video.currentTime = position;
});Ainsi, l’utilisateur peut reprendre la vidéo là où il s’était arrêté.
Améliorer l’apparence générale
Uniformiser le thème
Vous pouvez harmoniser le design du lecteur avec celui de votre site.
Par exemple, si votre site est clair, utilisez un thème blanc :
.video-container {
background-color: #f5f5f5;
color: #333;
}
.controls {
background: rgba(255, 255, 255, 0.8);
}
button {
color: #333;
}Le CSS vous donne un contrôle total sur le rendu visuel.
Vous venez de créer un lecteur vidéo entièrement personnalisé, avec des fonctionnalités modernes et une apparence professionnelle.
Ce projet vous a permis de comprendre plusieurs notions fondamentales du développement web :
- comment manipuler les médias avec la balise
<video>; - comment personnaliser l’apparence avec du CSS moderne ;
- comment rendre un site interactif grâce à JavaScript ;
- et surtout, comment penser ergonomie et expérience utilisateur.
Mais ce tutoriel n’est qu’un point de départ. Vous pouvez maintenant :
- ajouter un bouton de lecture automatique suivant plusieurs vidéos ;
- afficher des miniatures à l’avance sur la barre de progression ;
- créer un mode « cinéma » assombrissant le fond de la page ;
- ou encore relier votre lecteur à une base de données de contenus.
Le plus important, c’est d’expérimenter. Chaque modification de code vous aidera à mieux comprendre les relations entre le HTML, le CSS et le JavaScript, trois piliers du web moderne.
Avec ces compétences, vous êtes désormais capable de concevoir des lecteurs adaptés à vos projets, qu’il s’agisse d’un portfolio, d’un site de formation comme Créa-Troyes.fr ou même d’une plateforme multimédia.
