Safari/iOS原生支持HLS，可用<video>标签直接播放.m3u8流，需设type="application/x-mpegURL"且加muted；Chrome/Firefox等需hls.js转MSE；RTMP必须服务端转HLS或WebRTC；注意CORS、MIME、HTTPS一致性。
用 <video> 标签直接播放 HLS 流（Safari / iOS 原生支持）
HTML5 本身不原生支持 RTMP，但 Safari、iOS 和部分 Android 浏览器能直接播 HLS（.m3u8）流。关键不是“能不能嵌入”，而是“用什么协议 + 用什么标签 + 浏览器支不支持”。
- 必须确保直播源是 HLS（
<a href="https://www.php.cn/link/232b70eec3c40c0e66713ab77df3e7c8">https://www.php.cn/link/232b70eec3c40c0e66713ab77df3e7c8</a>），不是 RTMP（rtmp://...）或 FLV - 直接写：
<video controls autoplay muted> <source src="<a href="https://www.php.cn/link/299afad7fa95a2f1c0941d0f8f2fb772">https://www.php.cn/link/299afad7fa95a2f1c0941d0f8f2fb772</a>" type="application/x-mpegURL"> </video>
-
type="application/x-mpegURL"是必须写的，否则 Safari 可能静默失败 -
muted属性几乎必加，Chrome/Safari 对自动播放音频有限制，不静音会导致autoplay被拦截
在 Chrome / Edge / Firefox 播 HLS：必须用 hls.js
这些浏览器不支持原生 .m3u8，得靠 JS 库转成 MSE（Media Source Extensions）喂给 <video>。
- 加载
hls.js（推荐 CDN）：<script src="<a href="https://www.php.cn/link/85d2b3631422694bfa7f93e756a1795e">https://cdn.jsdelivr.net/npm/hls.js@latest"></script></a>;
- HTML 中仍用普通
<video>，但不要设src：<video id="video" controls></video>
- JS 初始化：
const video = document.getElementById('video'); if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource('<a href="https://www.php.cn/link/01dbb59de12641e7d43f38a51ea4e603">https://www.php.cn/link/01dbb59de12641e7d43f38a51ea4e603</a>'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () => video.play()); } - 注意：如果视频元素有
autoplay，要等MANIFEST_PARSED后再调play()，否则会报错DOMException: play() failed because the user didn't interact with the document first
RTMP 流怎么播？不能直接用 HTML5，得转协议
rtmp:// 地址无法被任何现代浏览器直接加载 —— 这不是代码写法问题，是协议层不支持。
- 必须在服务端用工具（如
ffmpeg、SRS、nginx-rtmp-module）把 RTMP 转成 HLS 或 WebRTC - 例如用 ffmpeg 推流转换：
ffmpeg -i "rtmp://input/live/stream" -c:v libx264 -c:a aac -f hls -hls_time 2 -hls_list_size 3 stream.m3u8
- 或更优选择：转 WebRTC（低延迟），需搭配信令服务器和
webrtc-streamer/mediasoup等方案 - 别在前端尝试用 Flash 或 WebSocket 模拟 RTMP —— Flash 已淘汰，WebSocket 无法替代 RTMP 的二进制封装逻辑
常见错误：跨域、CORS、MIME 类型、HTTPS 混合内容
即使 URL 和标签都对，也会因环境限制失败：
立即学习“前端免费学习笔记（深入）”；
- HLS 的
.m3u8和分片.ts文件必须返回正确 MIME：application/vnd.apple.mpegurl（.m3u8）、video/MP2T（.ts） - 所有资源（m3u8、ts、key 文件）必须同源，或服务端明确允许 CORS：
Access-Control-Allow-Origin: *
- 如果页面是 HTTPS，m3u8 地址也必须是 HTTPS；HTTP 资源会被现代浏览器直接屏蔽（Mixed Content）
- 检查 Network 面板：看到 403/404 是路径或权限问题；看到 0B 响应或 pending，大概率是 MIME 或 CORS 不对
实际部署时，最常卡在服务端配置 —— 播放器只是最后一环，前面协议选型、转封装、HTTP 头、证书、CDN 缓存策略，每一步都可能让流“看起来没动静”。
