Added native m3u8 / hls streaming

2025-06-27 18:40:31 +02:00 · 2021-10-23 00:13:53 +02:00
parent 2e13586ebb
commit 9929c48761
6 changed files with 53 additions and 2 deletions
--- a/src/res/hls.html
+++ b/src/res/hls.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--I haven't found out how to include scripts from third party websites, if even possible. PRs are always welcome-->
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <link rel="stylesheet" href="/res/hls.css">
+    <title>m3u8</title>
+</head>
+<body style="margin: 0">
+<video id="video" style="width: 100%; height: 100%"></video>
+<p id="not-supported" hidden>Filed to play m3u8 video. Try again or create a new issue <a href="https://github.com/ByteDream/stream-bypass/issues">here</a></p>
+<script src="/res/hls.js"></script>
+</body>
+</html>
--- a/src/res/hls.sass
+++ b/src/res/hls.sass
@ -0,0 +1,6 @@
+html, body, video
+  height: 100%
+  width: 100%
+
+video
+  margin: auto
--- a/src/res/hls.ts
+++ b/src/res/hls.ts
@ -0,0 +1,20 @@
+function loadHls() {
+    let url = window.location.hash.substring(1)
+    let video = document.getElementById('video') as HTMLVideoElement;
+
+    video.controls = true
+    if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url
+    // @ts-ignore
+    } else if (Hls.isSupported()) {
+        // @ts-ignore
+        let hls = new Hls()
+        hls.loadSource(url)
+        hls.attachMedia(video)
+    } else {
+        // shows a message if hls is not supported
+        document.getElementById('not-supported').hidden = false
+    }
+}
+
+loadHls()