<!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" /> <script src="secure.js"></script><script src="obfusque.js"></script> <!-- Create By sync - Boulette (V5.5.4) //--> <title>đŹ Lecteur VidĂ©o Multiples đ„</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;} /* 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: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 Multiples đ„<br>MP4 (MPEG-4) MOV, WMV, AVI, AVCHD, FLV, F4V, SWF, MKV, WEBM. ou HTML5</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="400" height="225" playsinline webkit-playsinline muted> 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="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.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://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 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(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> <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