使用教程
从播放一个地址，到把它嵌进你自己的网站
第 1 步：播放一个地址
- 打开首页，输入框里已经预填了一个可用的公开测试流，直接点「播放」就能看到画面。
- 想播自己的内容，把输入框换成你的 m3u8 或 mp4 地址，再点「播放」或按回车。
- 没有地址也没关系，点输入框下方的「测试流① / ② / ③」按钮，会自动填入不同的示例流。
播放成功后，鼠标移到画面上即可调出控制条：暂停、音量、进度拖拽、全屏。手机上横屏观看体验更好。
第 2 步：嵌入到你自己的网站
本站支持用 ?url= 参数指定播放地址，因此可以直接用 iframe 嵌入：
<iframe src="https://streamplay-ey1.pages.dev/?url=编码后的地址"
width="100%" height="480" frameborder="0" allowfullscreen></iframe>
关键细节：地址必须做 URL 编码。很多人的 m3u8 地址里带 ?、& 等参数符号，不编码的话会被当成页面自身的参数截掉，结果就是播不出来。例如：
原始：https://example.com/live/index.m3u8?token=abc&exp=123 编码：https%3A%2F%2Fexample.com%2Flive%2Findex.m3u8%3Ftoken%3Dabc%26exp%3D123
可以用 Dev 工具箱里的 URL 编解码工具完成这一步。
第 3 步：播不出来时的五步排查
| 检查项 | 怎么做 |
|---|---|
| 1. 地址是否可访问 | 用浏览器新标签页直接打开这个 m3u8。打不开 → 地址问题或源站故障，与播放器无关。 |
| 2. 是否允许跨域 | 打开开发者工具 → Network，看该请求响应头里有没有 Access-Control-Allow-Origin。没有 → 需要在源站配置。 |
| 3. 编码是否支持 | H.264 基本都能播；H.265/HEVC 在多数浏览器播不了。表现为黑屏无报错。 |
| 4. 是否被自动播放策略拦截 | 正常行为，手动点一下播放按钮即可。 |
| 5. 控制台报错 | 按 F12 打开 Console，把红色报错记下来，到联系页面反馈。 |
进阶：用 ffmpeg 生成自己的 HLS 测试流
如果你想在本地验证一套 HLS 流程，可以用 ffmpeg 把一个 mp4 切成 m3u8 分片：
ffmpeg -i input.mp4 \ -c:v libx264 -c:a aac \ -hls_time 6 -hls_list_size 0 \ -hls_segment_filename "seg_%03d.ts" \ index.m3u8
参数含义：
-hls_time 6：每个分片 6 秒；-hls_list_size 0：播放列表保留全部分片（点播场景；直播通常设为有限值）；-c:v libx264：转成 H.264，保证浏览器兼容性。
生成后用任意静态服务器托管这个目录（例如 python -m http.server 8080），把 http://localhost:8080/index.m3u8 填进本站即可播放。注意同源部署时跨域不是问题，不同端口也算跨域。