Mercurial

view 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
line wrap: on
line source

<!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>