<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Language" content="fr" /> <meta name="viewport" content="width=device-width, initial-scale=0.9, viewport-fit=cover" /> <!-- ===== SEO ===== --> <title>Lecteur Vidéo Multiples HTML5 | Feuille d'heures Angélique</title> <meta name="description" content="Lecteur vidéo HTML5 multiple compatible MP4, WEBM, AVI, MOV, MKV et autres formats. Lecteur moderne avec Video.js et Chromecast intégré." /> <meta name="keywords" content="lecteur vidéo HTML5, video.js, lecteur mp4, lecteur webm, lecteur mov, lecteur mkv, lecteur vidéo javascript, streaming vidéo, lecteur navigateur, chromecast, HTML5 player" /> <meta name="author" content="sync" /> <meta name="generator" content="Feuille d'heures Angélique" /> <meta name="robots" content="index, follow, max-image-preview:large" /> <meta name="rating" content="general" /> <meta name="referrer" content="strict-origin-when-cross-origin" /> <!-- ===== URL CANONIQUE ===== --> <link rel="canonical" href="https://feuille-heures-angelique.neocities.org/plus/Page_Divers/" /> <link rel="alternate" hreflang="fr" href="https://feuille-heures-angelique.neocities.org/" /> <!-- ===== FAVICON ===== --> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>" /> <!-- ===== OPEN GRAPH ===== --> <meta property="og:locale" content="fr_FR" /> <meta property="og:type" content="website" /> <meta property="og:title" content="🎬 Lecteur Vidéo Multiples HTML5" /> <meta property="og:description" content="Lecteur vidéo HTML5 moderne compatible MP4, WEBM, AVI, MOV, MKV avec Video.js et Chromecast." /> <meta property="og:url" content="https://feuille-heures-angelique.neocities.org/plus/Page_Divers/" /> <meta property="og:site_name" content="Feuille d'heures Angélique" /> <meta property="og:image" content="https://feuille-heures-angelique.neocities.org/plus/preview.png" /> <meta property="og:image:alt" content="Lecteur vidéo HTML5 multiple avec interface moderne" /> <!-- ===== TWITTER CARD ===== --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="🎬 Lecteur Vidéo Multiples HTML5" /> <meta name="twitter:description" content="Lecteur vidéo HTML5 moderne compatible multi-formats avec Video.js." /> <meta name="twitter:image" content="https://feuille-heures-angelique.neocities.org/plus/preview.png" /> <!-- ===== MOBILE ===== --> <meta name="theme-color" content="#0b1225" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-title" content="Lecteur Vidéo" /> <meta name="application-name" content="Lecteur Vidéo HTML5" /> <!-- ===== PERFORMANCE ===== --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="format-detection" content="telephone=no" /> <meta name="color-scheme" content="dark light" /> <!-- ===== CACHE ===== --> <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <!-- ===== SECURITE ===== --> <meta http-equiv="Permissions-Policy" content="interest-cohort=()" /> <!-- Create By sync - Boulette (V8.0.0) --> <style type="text/css"> html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; padding: 0; height: 100%; background: linear-gradient(135deg, #0b1225, #66CC99); color: #f6f6f6; text-align: center; overflow-x: hidden; user-select: none; font-size: 12px; } h1 { margin-top: 80px; font-size: 24px; text-shadow: 0 0 12px #0a0a0a; } h2 { font-size: 14px; text-shadow: 5 0 12px #0a0a0a; } /* Styles pour le conteneur et le footer */ .video-wrapper { width: 400px; margin: 0 auto; padding: 0; text-align: center;} .footer-style { position:relative; margin:30px auto 10px; width: 360px; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size: 12px; /* Taille de police du footer ajustée */ } </style> </head> <body> <h1>🎬 lecteur player Multiples 🎥</h1> <h2>MP4 (MPEG-4) MOV, WMV, AVI, AVCHD, FLV, F4V, SWF, MKV, WEBM. ou HTML5</h2> <span style="font-size: 24px;"> 💿 💽<br></span> <link href="video-js.css" rel="stylesheet" /> <script src="video.js"></script> <script src="videojs-chromecast.min.js"></script> <div class="video-wrapper"> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="400" height="225" playsinline webkit-playsinline> Désolé, votre navigateur ne prend pas en charge ce type de vidéo.</video><br> <select id="select"> <option value="https://media.istockphoto.com/id/1307785308/fr/vid%C3%A9o/conduite-hivernale-apr%C3%A8s-drone-shot.mp4?s=mp4-640x640-is&k=20&c=1QQFgDEBF4vHLxdKHLcVSkW9rB2ZUCF_iZt7uYXK94Q=">conduite hivernale</option> <option value="https://blazblue.wiki/images/f/fc/Big_Buck_Bunny_1080p_60fps_normal.mp4">Big Buck Bunny</option> <option value="https://v.ftcdn.net/17/81/17/31/700_F_1781173115_Dcah5UxqNhhU2kLYIeHJgmwF9YfuAEdQ_ST.mp4">New York. Drone footage</option> <option value="https://archive.org/download/ElephantsDream/ed_hd_512kb.mp4" type="video/ogv">Elephants Dream</option> <option value="https://media.istockphoto.com/id/2198185475/fr/vid%C3%A9o/vue-nocturne-du-trafic-arrivant-%C3%A0-fionie.mp4?s=mp4-640x640-is&k=20&c=Mhf6T0LG6ON-xMhsEZevEUTws_KqKJkW41JulI9hy94=">Vue nocturne du trafic</option> </select> </div> <div value="vjs-speed-controls" id="vjs-speed-controls" style="margin-top: 12px;"></div> <script> document.addEventListener('DOMContentLoaded', function() { const player = videojs('my-video'); const select = document.getElementById('select'); // Initial video player.src({ type: 'video/mp4', src: select.value }); player.muted(false); // true coupe le son player.ready(() => { player.play().catch(() => { console.log("Autoplay bloqué, utilisateur doit cliquer ▶️"); }); }); // Changement de vidéo select.addEventListener('change', () => { player.src({ type: 'video/mp4', src: select.value }); player.play().catch(() => { console.log("Appuie sur ▶️ pour démarrer la vidéo"); }); }); }); </script> <div style="margin: 10px;"> <footer class="footer-style"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'heures Angélique (fr)</a></footer> </div> </body> </html>
Toutes les informations !
Télécharger le fichier: ↠ video-js.css Télécharger le fichier: ↠ video.js Télécharger le fichier: ↠ videojs-chromecast.min.js