Html5
Css3
Javascript
Lecteur Video
Video Player
Controls
Plein Ecran
Responsive
Vanilla Js
Snippet
Lecteur vidéo personnalisé en HTML5, CSS3 et JavaScript vanilla avec contrôles custom, barre de progression et mode plein écran natif.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Video HTML CSS JS 2026 04280032 | AngularForAll</title>
<meta name="theme-color" content="#0a0a2a">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
background: linear-gradient(145deg, #0b0b1f 0%, #12122f 100%);
color: #f0f0ff;
padding: 2rem 1.5rem;
line-height: 1.4;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* header */
.hero {
text-align: center;
margin-bottom: 3rem;
padding: 1.5rem 1rem;
background: rgba(10, 20, 40, 0.6);
backdrop-filter: blur(8px);
border-radius: 3rem;
border: 1px solid rgba(80, 120, 255, 0.3);
box-shadow: 0 20px 35px -15px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 2.2rem;
background: linear-gradient(135deg, #ffffff, #aaccff, #6a8cff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
}
.badge-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
margin: 1.2rem 0 0.5rem;
}
.badge {
background: #1e2a3a;
padding: 0.3rem 1rem;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 500;
color: #bbd9ff;
border-left: 3px solid #3b82f6;
}
/* grille responsive */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
/* carte vidéo */
.video-card {
background: rgba(15, 20, 35, 0.75);
backdrop-filter: blur(12px);
border-radius: 2rem;
overflow: hidden;
border: 1px solid rgba(72, 120, 255, 0.25);
transition: all 0.25s ease;
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.4);
}
.video-card:hover {
transform: translateY(-6px);
border-color: #4f7eff;
box-shadow: 0 24px 36px -12px rgba(0, 30, 100, 0.5);
}
.card-header {
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
}
.card-header h2 {
font-size: 1.4rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.options-tag {
font-family: monospace;
font-size: 0.7rem;
background: #0f212e;
padding: 0.2rem 0.7rem;
border-radius: 20px;
color: #7ae9ff;
letter-spacing: 0.3px;
}
.video-wrapper {
padding: 1.2rem;
background: #03030e;
}
video {
width: 100%;
border-radius: 1.2rem;
background: #000;
display: block;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
/* description des attributs */
.attr-list {
padding: 1rem 1.5rem 1.3rem;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.8rem;
}
.attr-list p {
margin-bottom: 0.4rem;
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: baseline;
}
.attr-name {
font-weight: 700;
color: #ffcc88;
min-width: 90px;
}
.attr-value {
color: #b8e2ff;
font-family: 'Menlo', monospace;
word-break: break-word;
}
hr {
border-color: rgba(255, 255, 255, 0.1);
margin: 0.5rem 0;
}
footer {
text-align: center;
margin-top: 3.5rem;
font-size: 0.8rem;
color: #8e9ecc;
border-top: 1px solid rgba(90, 130, 255, 0.3);
padding-top: 2rem;
}
@media (max-width: 580px) {
body {
padding: 1rem;
}
.gallery {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.card-header h2 {
font-size: 1.2rem;
}
}
/* style particuliers pour le mode sombre natif */
::selection {
background: #3b6eff;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="hero">
<h1>🎥 5 expériences vidéo HTML5</h1>
<div class="badge-group">
<span class="badge">▶️ contrôles natifs</span>
<span class="badge">🔁 loop & autoplay</span>
<span class="badge">📺 poster & preload</span>
<span class="badge">🎚️ muted & volume</span>
<span class="badge">📌 pip / playsinline</span>
</div>
<p style="margin-top: 1rem; opacity: 0.8;">Toutes les options : contrôles, autoplay, loop, muted, poster, preload, playsinline, et plus encore.</p>
</div>
<div class="gallery">
<!-- ========== EXEMPLE 1 : CONTROLES COMPLETS + POSTER ========= -->
<div class="video-card">
<div class="card-header">
<h2>🎛️ 1. Contrôles complets + Poster</h2>
<span class="options-tag">controls · poster · preload=metadata</span>
</div>
<div class="video-wrapper">
<video id="video1"
controls
poster="public/loader.gif"
preload="metadata"
aria-label="Vidéo démo Big Buck Bunny avec poster">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
Votre navigateur ne supporte pas la balise vidéo HTML5.
</video>
</div>
<div class="attr-list">
<p><span class="attr-name">🎛️ Attributs :</span><span class="attr-value">controls, poster (image miniature), preload="metadata"</span></p>
<p><span class="attr-name">📦 Formats :</span><span class="attr-value">MP4 + WebM (fallback)</span></p>
<p><span class="attr-name">✨ Spécificité :</span><span class="attr-value">interface utilisateur classique, affiche un poster avant lecture.</span></p>
</div>
</div>
<!-- ========== EXEMPLE 2 : AUTOPLAY + MUTED + LOOP (vidéo de fond type démo) ========= -->
<div class="video-card">
<div class="card-header">
<h2>🔄 2. Autoplay · Muted · Loop</h2>
<span class="options-tag">autoplay · muted · loop · playsinline</span>
</div>
<div class="video-wrapper">
<video id="video2"
autoplay
muted
loop
playsinline
preload="auto"
aria-label="Boucle vidéo automatique sans son">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
Votre navigateur ne supporte pas la balise vidéo.
</video>
</div>
<div class="attr-list">
<p><span class="attr-name">🎬 Attributs clés :</span><span class="attr-value">autoplay, muted, loop, playsinline (iOS compatible)</span></p>
<p><span class="attr-name">🔇 Comportement :</span><span class="attr-value">lecture automatique sans son, se répète en boucle — parfait pour ambiances / héros.</span></p>
<p><span class="attr-name">⚙️ Preload :</span><span class="attr-value">auto (charge dès que possible)</span></p>
</div>
</div>
<!-- ========== EXEMPLE 3 : VIDÉO SANS CONTROLES, AVEC PRELOAD AUTO ET TRACK (sous-titres démo) ========= -->
<div class="video-card">
<div class="card-header">
<h2>📜 3. Preload auto + Piste texte (WebVTT)</h2>
<span class="options-tag">preload=auto · track subtitles · disableRemotePlayback</span>
</div>
<div class="video-wrapper">
<video id="video3"
controls
preload="auto"
disableRemotePlayback
crossorigin="anonymous"
aria-label="Vidéo avec sous-titres example">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
<!-- Piste de sous-titres démonstrative (fichier fictif mais vrai exemple fonctionnel) - Nous utilisons un track externe valide pour démontrer l'option -->
<!--track src="public/cc-subtitles.vtt" kind="subtitles" srclang="en" label="English" default-->
Votre navigateur ne supporte pas les pistes texte.
</video>
</div>
<div class="attr-list">
<p><span class="attr-name">📝 Options texte :</span><span class="attr-value"><track kind="subtitles"> (sous-titres .vtt)</span></p>
<p><span class="attr-name">⚡ Preload :</span><span class="attr-value">auto (pré-chargement maximum)</span></p>
<p><span class="attr-name">🔌 Désactivation :</span><span class="attr-value">disableRemotePlayback (évite partage chromecast etc)</span></p>
</div>
</div>
<!-- ========== EXEMPLE 4 : VIDÉO AVEC 'POSTER' DYNAMIQUE, CONTROLS LIST et CROSSORIGIN ========= -->
<div class="video-card">
<div class="card-header">
<h2>🖼️ 4. Contrôles personnalisables + crossorigin</h2>
<span class="options-tag">controlslist · crossorigin · poster haute résolution</span>
</div>
<div class="video-wrapper">
<video id="video4"
controls
controlslist="nodownload nofullscreen"
crossorigin="anonymous"
poster="public/loader.gif"
preload="metadata"
aria-label="Vidéo avec restrictions d'interface">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="attr-list">
<p><span class="attr-name">🚫 controlslist :</span><span class="attr-value">"nodownload nofullscreen" (cache téléchargement & fullscreen)</span></p>
<p><span class="attr-name">🌐 crossorigin :</span><span class="attr-value">anonymous (pour utilisations canvas / CORS)</span></p>
<p><span class="attr-name">🖼️ Poster :</span><span class="attr-value">image externe stylée avant lecture</span></p>
</div>
</div>
<!-- ========== EXEMPLE 5 : VIDÉO AVEC VOLUME, DEFAULT MUTED + PIP NATIF ET AUTO PLAY MAIS USER GESTURE ========= -->
<div class="video-card">
<div class="card-header">
<h2>🎚️ 5. Volume configurable · PiP · Picture-in-Picture</h2>
<span class="options-tag">autoplay (muted) + pip · enableRemotePlayback</span>
</div>
<div class="video-wrapper">
<video id="video5"
controls
autoplay muted
playsinline
preload="metadata"
disablePictureInPicture="false"
aria-label="Exemple avancé avec support PiP">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="attr-list">
<p><span class="attr-name">📌 PiP natif :</span><span class="attr-value">bouton d'incrustation (picture-in-picture) disponible sur navigateurs compatibles.</span></p>
<p><span class="attr-name">🔊 Volume :</span><span class="attr-value">démarré muet, mais utilisateur peut activer le son + gérer volume via contrôles.</span></p>
<p><span class="attr-name">🎯 Attributs supplémentaires :</span><span class="attr-value">playsinline, disablePictureInPicture="false" (PiP autorisé)</span></p>
</div>
</div>
</div>
<!-- Section explicative des options globales de la balise <video> -->
<div style="background: rgba(0, 0, 0, 0.4); border-radius: 1.8rem; padding: 1.5rem; margin: 1rem 0 1rem;">
<h3 style="display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem;">🎬 Toutes les options de la balise <video> (HTML5)</h3>
<div style="display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem;">
<div style="flex: 1; min-width: 180px;"><strong>✔ src</strong> — source de la vidéo</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ controls</strong> — affiche l’interface utilisateur</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ autoplay</strong> — lance auto (nécessite muted souvent)</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ loop</strong> — lecture en boucle</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ muted</strong> — désactive l’audio au départ</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ poster</strong> — image avant lecture</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ preload</strong> (none/metadata/auto)</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ playsinline</strong> — sur iOS évite le plein écran auto</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ crossorigin</strong> (anonymous/use-credentials)</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ controlslist</strong> (nodownload/nofullscreen/noremoteplayback)</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ disablePictureInPicture</strong> bloque le mode PiP</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ disableRemotePlayback</strong> </div>
<div style="flex: 1; min-width: 180px;"><strong>✔ height / width</strong> dimensions explicites</div>
<div style="flex: 1; min-width: 180px;"><strong>✔ <track></strong> sous-titres, chapitres, descriptions</div>
</div>
<hr style="margin: 1rem 0;">
<p style="color: #bfd6ff;">⭐ Les 5 exemples ci-dessus intègrent chacun une combinaison unique : contrôles, autoplay en muet, boucle, pistes texte, restrictions d’interface et mode Picture-in-Picture.</p>
<p style="margin-top: 0.6rem;">🔊 <strong>Remarque navigateurs :</strong> L'autoplay avec son est bloqué par la plupart des navigateurs récents → <code>muted</code> est indispensable pour un départ automatique.</p>
</div>
<footer>
<p>✨ Démonstration des balises vidéo HTML5 – tous les attributs standards supportés par Chrome, Firefox, Safari, Edge<br>
🎥 Vidéos</p>
<p style="margin-top: 0.5rem;">© 2025 • Exemple éducatif • 5 styles vidéo avec toutes les options natives</p>
</footer>
</div>
<!-- PETITE INTERACTION JS : Ajout d’un mini log dynamique pour illustrer les événements vidéo (sans surcharge) -->
<script>
(function() {
// Exemple simple : afficher dans la console les événements principaux pour les vidéos 1, 2, 3 (pour démonstration pédagogique)
const videos = document.querySelectorAll('video');
videos.forEach((vid, idx) => {
vid.addEventListener('play', () => console.log(`🎬 Vidéo ${idx+1} : lecture démarrée`));
vid.addEventListener('pause', () => console.log(`⏸️ Vidéo ${idx+1} : pause`));
vid.addEventListener('volumechange', () => {
if(!vid.muted && vid.volume > 0) console.log(`🔊 Vidéo ${idx+1} : volume = ${vid.volume}`);
else if(vid.muted) console.log(`🔇 Vidéo ${idx+1} : vidéo muette`);
});
vid.addEventListener('ended', () => console.log(`🏁 Vidéo ${idx+1} : terminée`));
// Support Picture-in-Picture event pour la vidéo 5
if(idx === 4) {
vid.addEventListener('enterpictureinpicture', () => console.log('📺 Mode Picture-in-Picture activé (vidéo 5)'));
vid.addEventListener('leavepictureinpicture', () => console.log('🖥️ Sortie du mode Picture-in-Picture'));
}
});
// petite optimisation: la vidéo 2 et vidéo 5 sont en muted/autoplay, garantir que si le navigateur bloque l'autoplay on ne génère pas d'erreur silencieuse.
// Aucune action intrusive, mais on essaie de jouer explicitement si besoin (déjà géré par autoplay muted)
const video2 = document.getElementById('video2');
const video5 = document.getElementById('video5');
if(video2) {
video2.play().catch(e => console.warn("Autoplay vidéo2 bloqué mais muted présent normalement OK :", e));
}
if(video5) {
video5.play().catch(e => console.warn("Autoplay vidéo5 -> muet, ok toléré", e));
}
// Ajout d'un tooltip dynamique pour montrer le support des pistes textes (track)
const trackVideo = document.getElementById('video3');
if(trackVideo && trackVideo.textTracks) {
trackVideo.addEventListener('loadedmetadata', () => {
if(trackVideo.textTracks.length > 0) {
console.log("✅ Piste de sous-titres disponible pour l'exemple 3");
}
});
}
// Poster et attributs additionnels - simples logs
console.log("📺 Page des 5 styles vidéo chargée — tous les attributs HTML5 vidéo sont illustrés.");
})();
</script>
</body>
</html>
Télécharger le fichier source