Mercurial

comparison mrjunejune/src/tools/hls_player/index.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 543df0fe7168
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
14 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p> 14 <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>
15 15
16 <form id="hlsForm" class="hls-form"> 16 <form id="hlsForm" class="hls-form">
17 <label for="hlsUrl">Playlist URL</label> 17 <label for="hlsUrl">Playlist URL</label>
18 <div class="hls-url-row"> 18 <div class="hls-url-row">
19 <input 19 <zen-input appearance="plain" size="md">
20 id="hlsUrl" 20 <input
21 name="url" 21 id="hlsUrl"
22 type="text" 22 name="url"
23 inputmode="url" 23 type="text"
24 value="/public/hls-sample/h264-ts-stream.m3u8" 24 inputmode="url"
25 placeholder="https://example.com/stream.m3u8" 25 value="/public/hls-sample/h264-ts-stream.m3u8"
26 required 26 placeholder="https://example.com/stream.m3u8"
27 /> 27 required
28 <button type="submit">Load</button> 28 />
29 <button id="sampleButton" type="button">Sample</button> 29 </zen-input>
30 <zen-button appearance="plain" size="md">
31 <button type="submit">Load</button>
32 </zen-button>
33 <zen-button appearance="plain" size="md">
34 <button id="sampleButton" type="button">Sample</button>
35 </zen-button>
30 </div> 36 </div>
31 </form> 37 </form>
32 38
33 <fieldset class="hls-local-picker"> 39 <fieldset class="hls-local-picker">
34 <legend>Local HLS</legend> 40 <legend>Local HLS</legend>
35 <p>Select the playlist together with every init and segment file it references.</p> 41 <p>Select the playlist together with every init and segment file it references.</p>
36 <div class="hls-local-actions"> 42 <div class="hls-local-actions">
37 <label class="hls-file-button"> 43 <label class="hls-file-button">
38 Choose HLS files 44 Choose HLS files
39 <input 45 <zen-input appearance="plain" size="md">
40 id="hlsFiles" 46 <input
41 type="file" 47 id="hlsFiles"
42 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl" 48 type="file"
43 multiple 49 accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
44 /> 50 multiple
51 />
52 </zen-input>
45 </label> 53 </label>
46 <label class="hls-file-button"> 54 <label class="hls-file-button">
47 Choose HLS folder 55 Choose HLS folder
48 <input 56 <zen-input appearance="plain" size="md">
49 id="hlsFolder" 57 <input
50 type="file" 58 id="hlsFolder"
51 webkitdirectory 59 type="file"
52 multiple 60 webkitdirectory
53 /> 61 multiple
62 />
63 </zen-input>
54 </label> 64 </label>
55 </div> 65 </div>
56 </fieldset> 66 </fieldset>
57 67
58 <div class="hls-player-shell"> 68 <div class="hls-player-shell">