Mercurial

annotate mrjunejune/src/tools/hls_player/index.html @ 264:04fee26ecce0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add authenticated JRPG conversation platform Add reusable auth/session storage, owned conversation recovery, guest quotas, admin workflows, URL-routed conversation UI, mobile frame support, and parallel browser acceptance. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 07:34:12 -0700
parents 60a876c4587a
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
242
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 <!doctype html>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 <html lang="en">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 <head>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 {{/parts/base_head.html}}
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 <title>HLS Player - MrJuneJune</title>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 <link rel="stylesheet" href="/tools/hls_player/index.css" />
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 <script src="/public/hls.min.js" defer></script>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 <script src="/tools/hls_player/hls-player.js" defer></script>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 </head>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 <body>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 {{/parts/header.html}}
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 <main>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 <h1>Online HLS Player</h1>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 <form id="hlsForm" class="hls-form">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 <label for="hlsUrl">Playlist URL</label>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 <div class="hls-url-row">
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
19 <zen-input appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
20 <input
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
21 id="hlsUrl"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
22 name="url"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
23 type="text"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
24 inputmode="url"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
25 value="/public/hls-sample/h264-ts-stream.m3u8"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
26 placeholder="https://example.com/stream.m3u8"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
27 required
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
28 />
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
29 </zen-input>
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
30 <zen-button appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
31 <button type="submit">Load</button>
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
32 </zen-button>
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
33 <zen-button appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
34 <button id="sampleButton" type="button">Sample</button>
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
35 </zen-button>
242
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 </form>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 <fieldset class="hls-local-picker">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 <legend>Local HLS</legend>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 <p>Select the playlist together with every init and segment file it references.</p>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 <div class="hls-local-actions">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 <label class="hls-file-button">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 Choose HLS files
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
45 <zen-input appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
46 <input
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
47 id="hlsFiles"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
48 type="file"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
49 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
50 multiple
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
51 />
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
52 </zen-input>
242
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 </label>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 <label class="hls-file-button">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 Choose HLS folder
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
56 <zen-input appearance="plain" size="md">
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
57 <input
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
58 id="hlsFolder"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
59 type="file"
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
60 webkitdirectory
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
61 multiple
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
62 />
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 242
diff changeset
63 </zen-input>
242
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 </label>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 </fieldset>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 <div class="hls-player-shell">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 <video id="hlsVideo" controls playsinline preload="metadata"></video>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 <p id="hlsStatus" class="hls-status" role="status" aria-live="polite">Ready to load a playlist.</p>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 <dl id="hlsDetails" class="hls-details" hidden>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 <dt>Playback</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 <dd data-detail="mode">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 <dt>Segments</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 <dd data-detail="segments">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 <dt>Duration</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 <dd data-detail="duration">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 <dt>Codec</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 <dd data-detail="codecs">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 </dl>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 <section class="hls-notes">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 <h2>Notes</h2>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 <ul>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 <li>Remote playlists must allow cross-origin requests.</li>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 <li>Local loading stays in your browser; selected files are not uploaded.</li>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 <li>Chrome, Edge, and Firefox support MPEG-TS, fragmented MP4, live, and adaptive HLS through hls.js.</li>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 <li>Safari uses native HLS playback when available.</li>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 </ul>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 </section>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 </main>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 {{/parts/footer.html}}
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 </body>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 </html>