Bootstrap 5
Lecteur Video
Video Player
Responsive
Ratio
Overlay
Controls
Play Button
Html
Snippet
Lecteur vidéo Bootstrap 5 avec ratio responsive automatique, overlay bouton play, barre de progression stylisée et intégration rapide.
<!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 Bootstrap 5 2026 04280035 | AngularForAll</title>
<meta name="theme-color" content="#0a192f">
<!-- Bootstrap 5 CSS + Icons + animations douces -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Police Google Fonts pour plus d'élégance -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
background: linear-gradient(135deg, #0a0f1e 0%, #0a192f 50%, #0b1120 100%);
color: #eef2ff;
}
/* navbar personnalisée */
.navbar-glass {
background: rgba(5, 15, 30, 0.75);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(72, 187, 255, 0.25);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.hero-section {
background: radial-gradient(circle at 20% 30%, rgba(0, 100, 200, 0.15), transparent 70%);
border-bottom: 1px solid rgba(0, 180, 255, 0.2);
}
.badge-bs {
background: rgba(13, 110, 253, 0.2);
backdrop-filter: blur(4px);
border: 1px solid #3b82f6;
color: #bbd9ff;
font-weight: 500;
padding: 0.4rem 1rem;
border-radius: 40px;
font-size: 0.8rem;
transition: all 0.2s;
}
.badge-bs:hover {
background: #0d6efd30;
transform: translateY(-2px);
}
.video-card {
background: rgba(12, 22, 40, 0.7);
backdrop-filter: blur(8px);
border-radius: 1.5rem;
border: 1px solid rgba(59, 130, 246, 0.3);
transition: transform 0.25s ease, box-shadow 0.3s;
overflow: hidden;
height: 100%;
box-shadow: 0 20px 30px -15px rgba(0, 0, 0, 0.4);
}
.video-card:hover {
transform: translateY(-6px);
border-color: #3b82f6;
box-shadow: 0 25px 40px -12px rgba(0, 100, 255, 0.25);
}
.card-header-custom {
background: rgba(0, 0, 0, 0.35);
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
padding: 1rem 1.25rem;
}
.video-wrapper {
background: #030712;
padding: 1rem;
}
video {
width: 100%;
border-radius: 1rem;
background: #000;
display: block;
box-shadow: 0 6px 14px rgba(0,0,0,0.6);
cursor: pointer;
}
.attr-panel {
background: rgba(0, 0, 0, 0.4);
padding: 0.9rem 1.2rem;
font-size: 0.8rem;
border-top: 1px solid rgba(72, 130, 255, 0.2);
}
.attr-key {
font-weight: 700;
color: #ffcd94;
min-width: 105px;
display: inline-block;
}
.footer-bs {
background: #030712cc;
backdrop-filter: blur(8px);
border-top: 1px solid #1e2a4a;
}
.options-grid {
background: rgba(0, 20, 45, 0.5);
border-radius: 1.2rem;
border-left: 4px solid #0d6efd;
}
@media (max-width: 768px) {
.hero-section h1 {
font-size: 1.9rem;
}
.attr-key {
min-width: 85px;
}
}
/* scrollbar custom */
::-webkit-scrollbar {
width: 8px;
background: #0a1620;
}
::-webkit-scrollbar-thumb {
background: #2c5282;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- Navigation Bootstrap 5 -->
<nav class="navbar navbar-glass navbar-dark sticky-top">
<div class="container">
<a class="navbar-brand fw-bold fs-4" href="#">
<i class="bi bi-film me-2 text-info"></i>Video<span class="text-primary">Lab</span>
</a>
<div class="d-none d-md-flex gap-3">
<span class="badge bg-primary bg-opacity-25 text-light px-3 py-2 rounded-pill"><i class="bi bi-grid-3x3-gap-fill me-1"></i> 5 styles</span>
<span class="badge bg-primary bg-opacity-25 text-light px-3 py-2 rounded-pill"><i class="bi bi-sliders2"></i> Toutes options HTML5</span>
<span class="badge bg-primary bg-opacity-25 text-light px-3 py-2 rounded-pill"><i class="bi bi-bootstrap-fill"></i> Bootstrap 5</span>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#exemples">✨ Exemples</a></li>
<li class="nav-item"><a class="nav-link" href="#options">⚙️ Attributs</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero section avec présentation claire -->
<section class="hero-section py-5">
<div class="container py-3 text-center">
<h1 class="display-4 fw-bold mb-3 bg-gradient-text" style="background: linear-gradient(120deg, #fff, #7ab3ff, #3b82f6); background-clip: text; -webkit-background-clip: text; color: transparent;">
<i class="bi bi-camera-reels-fill me-2"></i>5 styles vidéo HTML5
</h1>
<p class="lead px-md-5 mx-md-3">Tous les attributs natifs : <strong>controls, autoplay, loop, muted, poster, preload, playsinline, controlslist, PiP, pistes textes</strong> et plus encore — intégrés avec <i class="bi bi-bootstrap"></i> Bootstrap 5 grille responsive.</p>
<div class="d-flex flex-wrap justify-content-center gap-2 mt-4">
<span class="badge-bs"><i class="bi bi-play-circle"></i> Contrôles UI</span>
<span class="badge-bs"><i class="bi bi-arrow-repeat"></i> Loop / Autoplay</span>
<span class="badge-bs"><i class="bi bi-card-image"></i> Poster image</span>
<span class="badge-bs"><i class="bi bi-volume-mute-fill"></i> Muted by design</span>
<span class="badge-bs"><i class="bi bi-pip"></i> Picture-in-Picture</span>
</div>
</div>
</section>
<!-- Grille Bootstrap 5 des 5 exemples -->
<div class="container my-5" id="exemples">
<div class="row g-4">
<!-- CARTE 1 : Contrôles complets + poster HD -->
<div class="col-lg-6 col-xl-4">
<div class="video-card h-100">
<div class="card-header-custom d-flex justify-content-between align-items-center flex-wrap">
<h3 class="h5 mb-0 fw-semibold"><i class="bi bi-display me-2 text-info"></i> style 1 · Contrôles + poster</h3>
<span class="badge bg-secondary bg-opacity-50"><i class="bi bi-tags"></i> controls poster</span>
</div>
<div class="video-wrapper">
<video controls preload="metadata" poster="public/loader.gif" aria-label="BigBuckBunny avec affiche">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
Navigateur non compatible.
</video>
</div>
<div class="attr-panel">
<div><span class="attr-key"><i class="bi bi-gear-wide-connected"></i> Attributs :</span> <code>controls poster preload="metadata"</code></div>
<div><span class="attr-key"><i class="bi bi-filetype-mp4"></i> Formats :</span> MP4 + WebM (fallback)</div>
<div><span class="attr-key"><i class="bi bi-info-circle"></i> Détail :</span> Interface classique avec image miniature avant lecture.</div>
</div>
</div>
</div>
<!-- CARTE 2 : Autoplay + muted + loop (background style) -->
<div class="col-lg-6 col-xl-4">
<div class="video-card h-100">
<div class="card-header-custom d-flex justify-content-between align-items-center flex-wrap">
<h3 class="h5 mb-0 fw-semibold"><i class="bi bi-infinity me-2 text-warning"></i> style 2 · Autoplay muted loop</h3>
<span class="badge bg-secondary bg-opacity-50"><i class="bi bi-soundwave"></i> autoplay muted</span>
</div>
<div class="video-wrapper">
<video 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">
</video>
</div>
<div class="attr-panel">
<div><span class="attr-key"><i class="bi bi-lightning-charge-fill"></i> Attributs :</span> <code>autoplay muted loop playsinline preload="auto"</code></div>
<div><span class="attr-key"><i class="bi bi-chat"></i> Usage :</span> Vidéo de fond / héros, lecture silencieuse en continu.</div>
</div>
</div>
</div>
<!-- CARTE 3 : Piste de sous-titres + track + preload auto -->
<div class="col-lg-6 col-xl-4">
<div class="video-card h-100">
<div class="card-header-custom d-flex justify-content-between align-items-center flex-wrap">
<h3 class="h5 mb-0 fw-semibold"><i class="bi bi-subtract me-2 text-success"></i> style 3 · Sous-titres & track</h3>
<span class="badge bg-secondary bg-opacity-50"><i class="bi bi-cc-circle"></i> VTT subtitles</span>
</div>
<div class="video-wrapper">
<video controls preload="auto" crossorigin="anonymous" aria-label="Vidéo avec sous-titres démo">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
<!--track src="public/subtitles.vtt" kind="subtitles" srclang="en" label="English CC" default-->
Votre navigateur ne supporte pas les pistes textes.
</video>
</div>
<div class="attr-panel">
<div><span class="attr-key"><i class="bi bi-card-text"></i> Track :</span> sous-titres WebVTT (anglais)</div>
<div><span class="attr-key"><i class="bi bi-database"></i> Preload :</span> auto + crossorigin anonymous</div>
<div><span class="attr-key"><i class="bi bi-universal-access"></i> Accessibilité :</span> pistes de légendes intégrées.</div>
</div>
</div>
</div>
<!-- CARTE 4 : controlslist (nodownload/nofullscreen) + crossorigin poster personnalisé -->
<div class="col-lg-6 col-xl-4">
<div class="video-card h-100">
<div class="card-header-custom d-flex justify-content-between align-items-center flex-wrap">
<h3 class="h5 mb-0 fw-semibold"><i class="bi bi-grid-3x3-gap me-2 text-danger"></i> style 4 · controlslist + restriction</h3>
<span class="badge bg-secondary bg-opacity-50">nodownload nofullscreen</span>
</div>
<div class="video-wrapper">
<video controls controlslist="nodownload nofullscreen" poster="public/loader.gif" preload="metadata" aria-label="Vidéo avec options d'interface limitées">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="attr-panel">
<div><span class="attr-key"><i class="bi bi-sliders2"></i> controlslist :</span> "nodownload nofullscreen"</div>
<div><span class="attr-key"><i class="bi bi-image"></i> Poster :</span> vignette personnalisée HD</div>
<div><span class="attr-key"><i class="bi bi-shield-lock"></i> contrôles :</span> nodownload nofullscreen</div>
</div>
</div>
</div>
<!-- CARTE 5 : PiP natif + Picture-in-Picture + mute autoplay -->
<div class="col-lg-6 col-xl-4">
<div class="video-card h-100">
<div class="card-header-custom d-flex justify-content-between align-items-center flex-wrap">
<h3 class="h5 mb-0 fw-semibold"><i class="bi bi-pip me-2 text-primary"></i> style 5 · Picture-in-Picture & PiP</h3>
<span class="badge bg-secondary bg-opacity-50"><i class="bi bi-arrows-fullscreen"></i> PiP natif</span>
</div>
<div class="video-wrapper">
<video id="pipVideo" controls autoplay muted playsinline preload="metadata" disablePictureInPicture="false" aria-label="Exemple vidéo avec mode picture-in-picture">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="attr-panel">
<div><span class="attr-key"><i class="bi bi-pip-fill"></i> PiP support :</span> bouton natif "Picture in picture" (navigateurs compatibles)</div>
<div><span class="attr-key"><i class="bi bi-volume-down"></i> Départ :</span> muted + autoplay, utilisateur peut réactiver son.</div>
<div><span class="attr-key"><i class="bi bi-phone"></i> playsinline :</span> évite fullscreen auto sur mobile.</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section informative : TOUTES LES OPTIONS DE LA BALISE VIDEO -->
<div class="container my-4" id="options">
<div class="options-grid p-4 p-lg-5">
<div class="d-flex flex-wrap align-items-center gap-3 mb-3">
<i class="bi bi-code-square fs-1 text-primary"></i>
<h2 class="h3 mb-0 fw-bold">📋 Tous les attributs de la balise <video> (HTML5)</h2>
</div>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mt-2">
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>src</code> – source vidéo</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>controls</code> – barre de contrôle</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>autoplay</code> – lecture automatique</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>loop</code> – répétition infinie</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>muted</code> – muet par défaut</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>poster</code> – image avant lecture</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>preload</code> (none, metadata, auto)</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>playsinline</code> – lecture inline iOS</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>crossorigin</code> (anonymous, use-credentials)</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>controlslist</code> (nodownload/nofullscreen/noremoteplayback)</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>disablePictureInPicture</code> – désactive PiP</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>disableRemotePlayback</code> – cast désactivé</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code>height / width</code> – dimensions</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> <code><track></code> – sous-titres, chapitres</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> Événements JS : play, pause, volumechange ...</div>
<div class="col"><i class="bi bi-check-circle-fill text-success small"></i> Picture-in-Picture API supportée</div>
</div>
<hr class="my-3 opacity-25">
<p class="mb-0"><i class="bi bi-info-circle-fill text-info me-2"></i> Ces 5 démonstrations couvrent l'essentiel des cas d'usage : interface standard, boucle automatique muette, piste textuelle, contrôles restreints et mode picture-in-picture. Tous les attributs sont conformes aux spécifications HTML Living Standard.</p>
</div>
</div>
<!-- Footer élégant -->
<footer class="footer-bs mt-5 py-4">
<div class="container">
<div class="row align-items-center text-center text-md-start">
<div class="col-md-6">
<p class="mb-0"><i class="bi bi-bootstrap-fill me-1 text-primary"></i> Design avec Bootstrap 5 · Interfaces responsives · Compatible tous navigateurs modernes</p>
</div>
<div class="col-md-6 text-md-end mt-2 mt-md-0">
<a href="#" class="text-decoration-none text-info me-3"><i class="bi bi-arrow-up-circle"></i> Haut de page</a>
<span><i class="bi bi-film"></i> Vidéos (usage éducatif)</span>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS Bundle + Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Petit script interactif console + événements video, et tentative autoplay supplémentaire pour la vidéo5 -->
<script>
(function() {
// Sélection de toutes les vidéos pour logs pédagogiques
const allVideos = document.querySelectorAll('video');
allVideos.forEach((vid, index) => {
vid.addEventListener('play', () => console.info(`🎬 [Bootstrap5] Vidéo ${index+1} lecture`));
vid.addEventListener('pause', () => console.info(`⏸️ Vidéo ${index+1} en pause`));
vid.addEventListener('volumechange', () => {
if(!vid.muted && vid.volume > 0) console.info(`🔊 Vidéo ${index+1} → volume : ${vid.volume}`);
else if(vid.muted) console.info(`🔇 Vidéo ${index+1} muette`);
});
// Gestion PiP pour la carte n°5
if(vid.id === 'pipVideo') {
vid.addEventListener('enterpictureinpicture', () => console.info('📺 Mode Picture-in-Picture actif (style 5)'));
vid.addEventListener('leavepictureinpicture', () => console.info('🖥️ Sortie du mode PiP'));
}
});
// Forcer l'autoplay pour vidéo 2 et vidéo 5 (déjà en autoplay muted) mais sécurité supplémentaire
const videoAutoplay = document.querySelectorAll('video[autoplay]');
videoAutoplay.forEach(v => {
v.play().catch(e => console.warn("Autoplay nécessite interaction utilisateur si non muet? (déjà muted)", e));
});
// Vérifier support des pistes textes
const trackVideo = document.querySelector('video track');
if(trackVideo && trackVideo.parentElement.textTracks) {
// console.info("✅ Exemple 3 : sous-titres WebVTT chargés dynamiquement.");
}
// affichage dans console des attributs présents
// console.info("🎥 Page Bootstrap5 - 5 exemples de vidéo avec toutes les options HTML5 (controls, loop, poster, controlslist, PiP)");
})();
</script>
<!-- Ajout d'un style supplémentaire pour gradient texte -->
<style>
.bg-gradient-text {
background: linear-gradient(135deg, #f0f9ff, #90caf9, #3b82f6);
background-clip: text;
-webkit-background-clip: text;
}
code {
background: #0a1a2f;
padding: 0.2rem 0.4rem;
border-radius: 8px;
color: #bbd9ff;
font-size: 0.75rem;
}
.video-card video:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.navbar-glass .navbar-nav .nav-link {
color: #cbd5e6;
}
.navbar-glass .navbar-nav .nav-link:hover {
color: white;
}
</style>
</body>
</html>
Télécharger le fichier source