Mercurial

annotate mrjunejune/src/tools/hls_player/index.html @ 279:b3b547563ec7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add Google connector service and agent wiki Implement the C/Seobeo Google Drive and Gmail connector with encrypted OAuth storage, Zenbu authentication, browser testing, AI tool discovery, chunked HTTP decoding, and Bazel coverage. Consolidate repository guidance into progressive wiki documentation and enforce arena-first allocation for new first-party C code. Co-authored-by: Copilot <[email protected]> Copilot-Session: 84c338fd-0939-4bb3-b7f3-1062eb213e5d
author MrJuneJune <me@mrjunejune.com>
date Mon, 17 Aug 2026 22:22:36 -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>