给自己的网站加一个 m3u8 播放器：两种接入方式
动手前先明确需求
给网页挂上 m3u8 播放能力，本质上只有两条路：借别人的壳，或者自己造壳。前者五分钟上线，后者把控制权完全交到你手里。先想清楚要的是"能播就行"，还是"长成产品自己的样子"，后面的技术决策会顺畅很多。
路线一：iframe 一行接入
M3U8Lab 提供现成的网页播放器，把流地址作为参数传入即可工作：
<iframe src="https://m3u8.kixtools.com/player.html?url=https://example.com/live.m3u8"
width="100%" height="480" frameborder="0" allowfullscreen></iframe>页面里不用引任何脚本，解析、缓冲、码率切换都由播放器页自己处理。临时挂一个视频，或者想让非技术同事也能自助换地址，这条路线的维护成本几乎为零。
路线二：hls.js 自由定制
想要自己的控制条、皮肤和埋点逻辑，就值得走 hls.js 这条路：
<video id="player" controls style="width:100%"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script>
const media = document.querySelector('#player');
const engine = new Hls();
engine.loadSource('https://example.com/live.m3u8');
engine.attachMedia(media);
</script>hls.js 会逐段拉取分片并喂给浏览器的 Media Source 接口，你既可以监听错误事件做降级提示，也能按需手动切换清晰度。
两条路线怎么选
一个简单的判断标准：播放器只是配角，选 iframe，把时间留给业务；视频本身是核心体验，或者未来要做连播、广告、鉴权，就投入时间自建。两者也可以共存——先用 iframe 快速验证，产品定型后再迁移到 hls.js。
上线前的三道检查
- 跨域响应头：流服务器需返回
Access-Control-Allow-Origin，缺了它浏览器会直接拒载分片。 - 协议一致：页面走 HTTPS 时，m3u8 与分片同样要支持 HTTPS，混合内容会被拦截。
- 自动播放策略：直播场景给 video 标签加上
muted属性，多数浏览器才允许无手势起播。