uweb/searchurl/txt/plyr.html

46 lines
1.6 KiB
HTML

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<link rel="stylesheet" href="https://cdn.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://cdn.jsdelivr.net/npm/plyr"></script>
<script src="https://cdn.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>