<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; 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=1.5" /> <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"> <meta http-equiv="x-dns-prefetch-control" content="on" /> <title>đŹ Lecteur VidĂ©o đ„</title> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: linear-gradient(135deg, #0b1225, #66CC99); color: #ffffff; text-align: center; overflow-x: hidden; user-select: none; font-size: 12px; /* Taille de police principale ajustĂ©e */ } h1 { margin-top: 80px; font-size: 20px; text-shadow: 0 0 10px #000; } .video-wrapper { width: 400px; margin: 0 auto; padding: 0; text-align: center; } .footer-style { position:relative; margin:30px auto 10px; width:50%; 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> <br>đż đœ<br> <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" /><!-- supprimĂ© les format non lue. //--> <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" /><!-- AjoutĂ© votre format //--> 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 type="text/javascript" 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> <br> <p style="margin: 5;"><footer class="footer-style"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice dâheures - Feuille d'heures AngĂ©lique (fr)</a></p></footer></p> </body> </html>
RĂ©cupĂ©rer le fichier: â video-js.css RĂ©cupĂ©rer le fichier: â video.js RĂ©cupĂ©rer le fichier: â videojs-chromecast.min.js