87 lines
2.0 KiB
HTML
87 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Live Streaming</title>
|
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div style="height: 120vh;">
|
|
<video id="player" controls preload="auto" autoplay="true">
|
|
</video>
|
|
</div>
|
|
|
|
<div id="user_count"></div>
|
|
<br><br><br><br><br><br><br>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', ()=>{
|
|
let video = document.getElementById('player');
|
|
let source = "http://iceyfoxservers.ddns.net:4388/test.m3u8";
|
|
const defaultOptions = {};
|
|
if(Hls.isSupported()){
|
|
const hls = new Hls();
|
|
hls.loadSource(source);
|
|
hls.on(Hls.Events.MANIFEST_PARSED,function(event,data){
|
|
const availQualities = hls.levels.map((dat2) => dat2.height);
|
|
defaultOptions.controls = [
|
|
'play-large',
|
|
'restart',
|
|
//'rewind',
|
|
'play',
|
|
'fast-forward',
|
|
'progress',
|
|
'current-time',
|
|
'duration',
|
|
'mute',
|
|
'volume',
|
|
'captions',
|
|
'settings',
|
|
'pip',
|
|
'airplay',
|
|
'fullscreen',
|
|
]
|
|
defaultOptions.quality = {
|
|
default: availQualities[0],
|
|
options: availQualities,
|
|
forced: true,
|
|
onChange: (e)=> updateQuality(e)
|
|
}
|
|
|
|
new Plyr(video,defaultOptions);
|
|
});
|
|
hls.attachMedia(video);
|
|
window.hls = hls;
|
|
} else {
|
|
console.log("hls not supported");
|
|
}
|
|
|
|
function updateQuality(newQuality){
|
|
window.hls.levels.forEach((level, levelindex)=>{
|
|
if(level.height === newQuality){
|
|
window.hls.currentLevel=levelIndex;
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
user_count.innerHTML="user count: fetching"
|
|
user_count_loop();
|
|
})
|
|
|
|
function user_count_loop(){
|
|
fetch('http://iceyfoxservers.ddns.net:4389/usr_count.txt')
|
|
.then((res)=>res.text())
|
|
.then((data)=>{
|
|
user_count.innerHTML="user count: "+data
|
|
})
|
|
setTimeout(user_count_loop,5000);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|