JSFiddle - React, Tailwind, and code Playground

by wales

HTML

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
  <div class="player-wrap">
    <video id="video" controls playsinline></video>
  </div>

CSS

body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #111;
      color: #fff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .player-wrap {
      width: 1920px;
      height: 1080px;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    video {
      width: 1920px;
      height: 1080px;
      background: #000;
      display: block;
    }

JavaScript

// 換成你的 m3u8 連結
    const m3u8Url = "https://aka46p.akamaized.net/superapp/f691afb9-9767-45ea-b7c8-8bde2973e034/master.m3u8";

    const video = document.getElementById("video");

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(m3u8Url);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play().catch(() => {
          // 可能被瀏覽器自動播放政策阻擋，保留 controls 讓使用者手動播放
        });
      });
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      // Safari 原生支援 HLS
      video.src = m3u8Url;
      video.addEventListener("loadedmetadata", () => {
        video.play().catch(() => {
          // 可能被瀏覽器自動播放政策阻擋
        });
      });
    } else {
      alert("你的瀏覽器不支援 HLS 播放");
    }