Mercurial

diff mrjunejune/src/tools/hls_player/index.html @ 242:543df0fe7168

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[tools] Add full HLS player support
author MrJuneJune <me@mrjunejune.com>
date Mon, 03 Aug 2026 13:14:41 -0700
parents
children 60a876c4587a
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/src/tools/hls_player/index.html	Mon Aug 03 13:14:41 2026 -0700
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {{/parts/base_head.html}}
+    <title>HLS Player - MrJuneJune</title>
+    <link rel="stylesheet" href="/tools/hls_player/index.css" />
+    <script src="/public/hls.min.js" defer></script>
+    <script src="/tools/hls_player/hls-player.js" defer></script>
+  </head>
+  <body>
+    {{/parts/header.html}}
+    <main>
+      <h1>Online HLS Player</h1>
+      <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>
+
+      <form id="hlsForm" class="hls-form">
+        <label for="hlsUrl">Playlist URL</label>
+        <div class="hls-url-row">
+          <input
+            id="hlsUrl"
+            name="url"
+            type="text"
+            inputmode="url"
+            value="/public/hls-sample/h264-ts-stream.m3u8"
+            placeholder="https://example.com/stream.m3u8"
+            required
+          />
+          <button type="submit">Load</button>
+          <button id="sampleButton" type="button">Sample</button>
+        </div>
+      </form>
+
+      <fieldset class="hls-local-picker">
+        <legend>Local HLS</legend>
+        <p>Select the playlist together with every init and segment file it references.</p>
+        <div class="hls-local-actions">
+          <label class="hls-file-button">
+            Choose HLS files
+            <input
+              id="hlsFiles"
+              type="file"
+              accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
+              multiple
+            />
+          </label>
+          <label class="hls-file-button">
+            Choose HLS folder
+            <input
+              id="hlsFolder"
+              type="file"
+              webkitdirectory
+              multiple
+            />
+          </label>
+        </div>
+      </fieldset>
+
+      <div class="hls-player-shell">
+        <video id="hlsVideo" controls playsinline preload="metadata"></video>
+        <p id="hlsStatus" class="hls-status" role="status" aria-live="polite">Ready to load a playlist.</p>
+      </div>
+
+      <dl id="hlsDetails" class="hls-details" hidden>
+        <div>
+          <dt>Playback</dt>
+          <dd data-detail="mode">-</dd>
+        </div>
+        <div>
+          <dt>Segments</dt>
+          <dd data-detail="segments">-</dd>
+        </div>
+        <div>
+          <dt>Duration</dt>
+          <dd data-detail="duration">-</dd>
+        </div>
+        <div>
+          <dt>Codec</dt>
+          <dd data-detail="codecs">-</dd>
+        </div>
+      </dl>
+
+      <section class="hls-notes">
+        <h2>Notes</h2>
+        <ul>
+          <li>Remote playlists must allow cross-origin requests.</li>
+          <li>Local loading stays in your browser; selected files are not uploaded.</li>
+          <li>Chrome, Edge, and Firefox support MPEG-TS, fragmented MP4, live, and adaptive HLS through hls.js.</li>
+          <li>Safari uses native HLS playback when available.</li>
+        </ul>
+      </section>
+    </main>
+    {{/parts/footer.html}}
+  </body>
+</html>