126 lines
4.4 KiB
HTML
126 lines
4.4 KiB
HTML
<!doctype HTML>
|
|
<html>
|
|
<head>
|
|
<title>twitch.tforgione.fr</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
.filled {
|
|
fill: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container"></div>
|
|
<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
Object.defineProperty(TimeRanges.prototype, "asArray", {
|
|
get: function() {
|
|
var ret = [];
|
|
for (var i = 0; i < this.length; i++) {
|
|
ret.push({start: this.start(i), end: this.end(i)});
|
|
}
|
|
return ret;
|
|
}
|
|
});
|
|
|
|
Object.defineProperty(HTMLElement.prototype, "document", {
|
|
get: function() {
|
|
return document;
|
|
}
|
|
});
|
|
|
|
const app = Elm.Main.init({
|
|
node: document.getElementById('container'),
|
|
flags: {
|
|
url: "video/manifest.m3u8",
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
}
|
|
});
|
|
|
|
let hls;
|
|
|
|
app.ports.initVideo.subscribe(function(arg) {
|
|
const video = document.getElementById('video');
|
|
if (Hls.isSupported()) {
|
|
hls = new Hls();
|
|
hls.loadSource(arg);
|
|
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
|
|
// Transform available levels into an array of integers (height values).
|
|
const availableQualities = hls.levels.map((l) => l.height);
|
|
availableQualities.unshift(0);
|
|
app.ports.nowHasQualities.send(availableQualities);
|
|
});
|
|
|
|
hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
|
|
app.ports.nowHasQuality.send({
|
|
auto: hls.autoLevelEnabled,
|
|
height: hls.levels[data.level].height
|
|
});
|
|
})
|
|
|
|
hls.attachMedia(video);
|
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
video.src = arg;
|
|
}
|
|
});
|
|
|
|
app.ports.playPause.subscribe(function() {
|
|
const video = document.getElementById('video');
|
|
if (video.paused) {
|
|
video.play();
|
|
} else {
|
|
video.pause();
|
|
}
|
|
});
|
|
|
|
app.ports.seek.subscribe(function(arg) {
|
|
const video = document.getElementById('video');
|
|
console.log(arg);
|
|
video.currentTime = arg;
|
|
});
|
|
|
|
app.ports.requestFullscreen.subscribe(function() {
|
|
document.getElementById('full').requestFullscreen();
|
|
});
|
|
|
|
app.ports.exitFullscreen.subscribe(function() {
|
|
document.exitFullscreen();
|
|
});
|
|
|
|
app.ports.setPlaybackRate.subscribe(function(arg) {
|
|
const video = document.getElementById('video');
|
|
video.playbackRate = arg;
|
|
});
|
|
|
|
app.ports.setQuality.subscribe(function(arg) {
|
|
var old = hls.currentLevel;
|
|
if (arg.auto) {
|
|
hls.currentLevel = -1;
|
|
} else {
|
|
hls.levels.forEach((level, levelIndex) => {
|
|
if (level.height === arg.height) {
|
|
hls.currentLevel = levelIndex;
|
|
}
|
|
});
|
|
}
|
|
if (old === hls.currentLevel) {
|
|
app.ports.nowHasQuality.send({
|
|
auto: hls.autoLevelEnabled,
|
|
height: hls.currentLevel === -1 ? 0 : hls.levels[hls.currentLevel].height
|
|
});
|
|
}
|
|
});
|
|
|
|
app.ports.setVolume.subscribe(function(arg) {
|
|
const video = document.getElementById('video');
|
|
video.volume = arg.volume;
|
|
video.muted = arg.muted;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|