<!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>