Mercurial

annotate mrjunejune/src/tools/hls_player/index.html @ 245:3843bb6253ac

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[tools] Debounce live LaTeX preview Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Mon, 03 Aug 2026 18:23:36 -0700
parents 543df0fe7168
children 60a876c4587a
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">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 <input
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 id="hlsUrl"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 name="url"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 type="text"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 inputmode="url"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 value="/public/hls-sample/h264-ts-stream.m3u8"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 placeholder="https://example.com/stream.m3u8"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 required
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 />
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 <button type="submit">Load</button>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 <button id="sampleButton" type="button">Sample</button>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 </form>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 <fieldset class="hls-local-picker">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 <legend>Local HLS</legend>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 <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
36 <div class="hls-local-actions">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 <label class="hls-file-button">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 Choose HLS files
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 <input
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 id="hlsFiles"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 type="file"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 multiple
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 />
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 </label>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 <label class="hls-file-button">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 Choose HLS folder
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 <input
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 id="hlsFolder"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 type="file"
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 webkitdirectory
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 multiple
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 />
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 </label>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 </fieldset>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 <div class="hls-player-shell">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 <video id="hlsVideo" controls playsinline preload="metadata"></video>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 <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
61 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 <dl id="hlsDetails" class="hls-details" hidden>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 <dt>Playback</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 <dd data-detail="mode">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 <dt>Segments</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 <dd data-detail="segments">-</dd>
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 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 <dt>Duration</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 <dd data-detail="duration">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 <div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 <dt>Codec</dt>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 <dd data-detail="codecs">-</dd>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 </div>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 </dl>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 <section class="hls-notes">
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 <h2>Notes</h2>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 <ul>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 <li>Remote playlists must allow cross-origin requests.</li>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 <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
87 <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
88 <li>Safari uses native HLS playback when available.</li>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 </ul>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 </section>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 </main>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 {{/parts/footer.html}}
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 </body>
543df0fe7168 [tools] Add full HLS player support
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 </html>