🎬 Lecteur Vidéo MP4 HTML5

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Language" content="fr" /> <meta name="language" content="fr" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.9" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes"> <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>" /> <title>🎬 Lecteur Vidéo 🎥</title> <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; } .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 MP4 🎥</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="400px" height="auto" playsinline webkit-playsinline> <source src="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=" type="video/mp4" /> <source src="votre-video.ogv" type="video/mpeg" /> <source src="votre-video.webm" type="video/ogv" /> <source src="votre-video.webm" type="video/webm" /> <source src="votre-video.ogv" type="video/ogg" /> <source src="votre-video.ogv" type="video/mkv" /> <source src="votre-video.ogv" type="video/flv" /> <source src="votre-video.ogv" type="video/avi" /> <source src="votre-video.ogv" type="video/wmv" /> <source src="votre-video.ogv" type="video/mov" /> <source src="votre-video.ogv" type="video/swf" /> <source src="votre-video.ogv" type="video/f4v" /> <source src="votre-video.ogv" type="video/AVCHD" /> <source src="votre-video.ogv" type="video/html5" /> Désolé, votre navigateur ne prend pas en charge ce type de vidéo. </video> </div> <div value="vjs-speed-controls" id="vjs-speed-controls" style="margin-top: 12px;"></div> <script language="javascript"> 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(true); 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.alwaysdata.net/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'heures Angélique (fr)</a></footer> </div> </body> </html>

🎬 lecteur player MP4 🎥

MP4 (MPEG-4) MOV, WMV, AVI, AVCHD, FLV, F4V, SWF, MKV, WEBM. ou HTML5

🔓 Spoiler : Ouvrir / Fermer 🔐