<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/plyr/dist/plyr.css"/> <video id="player" playsinline controls data-plyr-config='{"controls": ["play-large", "play", "progress", "current-time", "settings", "fullscreen"] }'> <source id="src" /> </video> <script src="https://fastly.jsdelivr.net/npm/plyr"></script> <script src="https://fastly.jsdelivr.net/hls.js/latest/hls.js"></script> <script> const source = location.search.substring(3); document.getElementById("src").src = source; const video = document.querySelector("video"); let i = source.indexOf(".m3u8"); if(i>0 && (source.length <= (i+5) || '?'===source.charAt(i+5))) { const hls = new Hls(); hls.loadSource(source); const defaultOptions = {}; hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { const availableQualities = hls.levels.map((l) => l.height); defaultOptions.quality = { default: availableQualities[0], options: availableQualities, forced: true, onChange: (e) => updateQuality(e), } // Initialize new Plyr player with quality options const player = new Plyr(video, defaultOptions); }); hls.attachMedia(video); window.hls = hls; } else { const player = new Plyr(video); } function updateQuality(newQuality) { window.hls.levels.forEach((level, levelIndex) => { if (level.height === newQuality) { console.log("Found quality match with " + newQuality); window.hls.currentLevel = levelIndex; } }); } </script>