Mercurial
comparison mrjunejune/src/tools/hls_player/index.html @ 242:543df0fe7168
[tools] Add full HLS player support
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Mon, 03 Aug 2026 13:14:41 -0700 |
| parents | |
| children | 60a876c4587a |
comparison
equal
deleted
inserted
replaced
| 241:9c2eec61a152 | 242:543df0fe7168 |
|---|---|
| 1 <!doctype html> | |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 {{/parts/base_head.html}} | |
| 5 <title>HLS Player - MrJuneJune</title> | |
| 6 <link rel="stylesheet" href="/tools/hls_player/index.css" /> | |
| 7 <script src="/public/hls.min.js" defer></script> | |
| 8 <script src="/tools/hls_player/hls-player.js" defer></script> | |
| 9 </head> | |
| 10 <body> | |
| 11 {{/parts/header.html}} | |
| 12 <main> | |
| 13 <h1>Online HLS Player</h1> | |
| 14 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p> | |
| 15 | |
| 16 <form id="hlsForm" class="hls-form"> | |
| 17 <label for="hlsUrl">Playlist URL</label> | |
| 18 <div class="hls-url-row"> | |
| 19 <input | |
| 20 id="hlsUrl" | |
| 21 name="url" | |
| 22 type="text" | |
| 23 inputmode="url" | |
| 24 value="/public/hls-sample/h264-ts-stream.m3u8" | |
| 25 placeholder="https://example.com/stream.m3u8" | |
| 26 required | |
| 27 /> | |
| 28 <button type="submit">Load</button> | |
| 29 <button id="sampleButton" type="button">Sample</button> | |
| 30 </div> | |
| 31 </form> | |
| 32 | |
| 33 <fieldset class="hls-local-picker"> | |
| 34 <legend>Local HLS</legend> | |
| 35 <p>Select the playlist together with every init and segment file it references.</p> | |
| 36 <div class="hls-local-actions"> | |
| 37 <label class="hls-file-button"> | |
| 38 Choose HLS files | |
| 39 <input | |
| 40 id="hlsFiles" | |
| 41 type="file" | |
| 42 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl" | |
| 43 multiple | |
| 44 /> | |
| 45 </label> | |
| 46 <label class="hls-file-button"> | |
| 47 Choose HLS folder | |
| 48 <input | |
| 49 id="hlsFolder" | |
| 50 type="file" | |
| 51 webkitdirectory | |
| 52 multiple | |
| 53 /> | |
| 54 </label> | |
| 55 </div> | |
| 56 </fieldset> | |
| 57 | |
| 58 <div class="hls-player-shell"> | |
| 59 <video id="hlsVideo" controls playsinline preload="metadata"></video> | |
| 60 <p id="hlsStatus" class="hls-status" role="status" aria-live="polite">Ready to load a playlist.</p> | |
| 61 </div> | |
| 62 | |
| 63 <dl id="hlsDetails" class="hls-details" hidden> | |
| 64 <div> | |
| 65 <dt>Playback</dt> | |
| 66 <dd data-detail="mode">-</dd> | |
| 67 </div> | |
| 68 <div> | |
| 69 <dt>Segments</dt> | |
| 70 <dd data-detail="segments">-</dd> | |
| 71 </div> | |
| 72 <div> | |
| 73 <dt>Duration</dt> | |
| 74 <dd data-detail="duration">-</dd> | |
| 75 </div> | |
| 76 <div> | |
| 77 <dt>Codec</dt> | |
| 78 <dd data-detail="codecs">-</dd> | |
| 79 </div> | |
| 80 </dl> | |
| 81 | |
| 82 <section class="hls-notes"> | |
| 83 <h2>Notes</h2> | |
| 84 <ul> | |
| 85 <li>Remote playlists must allow cross-origin requests.</li> | |
| 86 <li>Local loading stays in your browser; selected files are not uploaded.</li> | |
| 87 <li>Chrome, Edge, and Firefox support MPEG-TS, fragmented MP4, live, and adaptive HLS through hls.js.</li> | |
| 88 <li>Safari uses native HLS playback when available.</li> | |
| 89 </ul> | |
| 90 </section> | |
| 91 </main> | |
| 92 {{/parts/footer.html}} | |
| 93 </body> | |
| 94 </html> |