Add web HTTP-FLV playback path

2026-04-01 11:30:52 +08:00
parent 01b25883e1
commit 48dc6c7b26
11 changed files with 455 additions and 93 deletions
--- a/frontend/web/flv.min.js
+++ b/frontend/web/flv.min.js
--- a/frontend/web/flv_player.html
+++ b/frontend/web/flv_player.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <title>Hightube FLV Player</title>
+  <style>
+    html, body {
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      background: #000;
+      overflow: hidden;
+    }
+
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: sans-serif;
+      color: #fff;
+    }
+
+    #player,
+    #message {
+      width: 100%;
+      height: 100%;
+    }
+
+    #player {
+      display: none;
+      object-fit: contain;
+      background: #000;
+    }
+
+    #message {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+  </style>
+  <script src="flv.min.js"></script>
+</head>
+<body>
+  <video id="player" controls autoplay muted playsinline></video>
+  <div id="message">Loading live stream...</div>
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    const streamUrl = params.get('src');
+    const video = document.getElementById('player');
+    const message = document.getElementById('message');
+
+    function showMessage(text) {
+      video.style.display = 'none';
+      message.style.display = 'flex';
+      message.textContent = text;
+    }
+
+    if (!streamUrl) {
+      showMessage('Missing stream URL.');
+    } else if (typeof flvjs === 'undefined') {
+      showMessage('flv.js failed to load. Check network access and reload.');
+    } else if (!flvjs.isSupported()) {
+      showMessage('This browser does not support FLV playback.');
+    } else {
+      const player = flvjs.createPlayer({
+        type: 'flv',
+        url: streamUrl,
+        isLive: true,
+      }, {
+        enableWorker: false,
+        stashInitialSize: 128,
+      });
+
+      player.attachMediaElement(video);
+      player.load();
+      player.play().catch(() => {});
+
+      player.on(flvjs.Events.ERROR, function(errorType, detail, info) {
+        const parts = ['Live stream failed to load.'];
+        if (errorType) parts.push('type=' + errorType);
+        if (detail) parts.push('detail=' + detail);
+        if (info && info.msg) parts.push('msg=' + info.msg);
+        showMessage(parts.join(' '));
+      });
+
+      video.style.display = 'block';
+      message.style.display = 'none';
+
+      window.addEventListener('beforeunload', function() {
+        player.destroy();
+      });
+    }
+  </script>
+</body>
+</html>