Mercurial

<!doctype html>
<html lang="en">
  <head>
    {{/parts/base_head.html}}
    <title>HLS Player - MrJuneJune</title>
    <link rel="stylesheet" href="/tools/hls_player/index.css" />
    <script src="/public/hls.min.js" defer></script>
    <script src="/tools/hls_player/hls-player.js" defer></script>
  </head>
  <body>
    {{/parts/header.html}}
    <main>
      <h1>Online HLS Player</h1>
      <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>

      <form id="hlsForm" class="hls-form">
        <label for="hlsUrl">Playlist URL</label>
        <div class="hls-url-row">
          <zen-input appearance="plain" size="md">
            <input
              id="hlsUrl"
              name="url"
              type="text"
              inputmode="url"
              value="/public/hls-sample/h264-ts-stream.m3u8"
              placeholder="https://example.com/stream.m3u8"
              required
            />
          </zen-input>
          <zen-button appearance="plain" size="md">
            <button type="submit">Load</button>
          </zen-button>
          <zen-button appearance="plain" size="md">
            <button id="sampleButton" type="button">Sample</button>
          </zen-button>
        </div>
      </form>

      <fieldset class="hls-local-picker">
        <legend>Local HLS</legend>
        <p>Select the playlist together with every init and segment file it references.</p>
        <div class="hls-local-actions">
          <label class="hls-file-button">
            Choose HLS files
            <zen-input appearance="plain" size="md">
              <input
                id="hlsFiles"
                type="file"
                accept=".m3u8,.m4s,.mp4,.ts,.aac,.vtt,.key,application/vnd.apple.mpegurl"
                multiple
              />
            </zen-input>
          </label>
          <label class="hls-file-button">
            Choose HLS folder
            <zen-input appearance="plain" size="md">
              <input
                id="hlsFolder"
                type="file"
                webkitdirectory
                multiple
              />
            </zen-input>
          </label>
        </div>
      </fieldset>

      <div class="hls-player-shell">
        <video id="hlsVideo" controls playsinline preload="metadata"></video>
        <p id="hlsStatus" class="hls-status" role="status" aria-live="polite">Ready to load a playlist.</p>
      </div>

      <dl id="hlsDetails" class="hls-details" hidden>
        <div>
          <dt>Playback</dt>
          <dd data-detail="mode">-</dd>
        </div>
        <div>
          <dt>Segments</dt>
          <dd data-detail="segments">-</dd>
        </div>
        <div>
          <dt>Duration</dt>
          <dd data-detail="duration">-</dd>
        </div>
        <div>
          <dt>Codec</dt>
          <dd data-detail="codecs">-</dd>
        </div>
      </dl>

      <section class="hls-notes">
        <h2>Notes</h2>
        <ul>
          <li>Remote playlists must allow cross-origin requests.</li>
          <li>Local loading stays in your browser; selected files are not uploaded.</li>
          <li>Chrome, Edge, and Firefox support MPEG-TS, fragmented MP4, live, and adaptive HLS through hls.js.</li>
          <li>Safari uses native HLS playback when available.</li>
        </ul>
      </section>
    </main>
    {{/parts/footer.html}}
  </body>
</html>
author	MrJuneJune <me@mrjunejune.com>
date	Sat, 08 Aug 2026 02:08:08 -0700
parents	60a876c4587a
children