html video 标签能直接播直播流，但仅限safari/ios原生支持hls（.m3u8），chrome/edge/firefox需hls.js或flv.js配合mse；rtmp和裸flv完全不支持，必须服务端转协议。
HTML video 标签能直接播直播流吗
能，但只限特定协议和格式。原生 <video></video> 只支持 HLS（Safari/iOS）和 MP4/WebM（非直播），不支持 RTMP 或裸 FLV。想用 <video></video> 播直播，必须走 HLS（.m3u8）或 MSE（配合 JavaScript 解析 FLV 或 MP4 分片）。
常见错误现象：VIDEO_ERROR: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED —— 这不是你路径写错了，是浏览器根本不认你的流地址格式。
- Chrome / Edge / Firefox：需用
MSE+flv.js或hls.js加载HLS - Safari / iOS：可直连
HLS（src设为.m3u8地址），但要求服务器支持206范围请求和CORS -
RTMP流（如rtmp://xxx/live/stream）完全不能被<video></video>直接加载，必须经服务端转成HLS或HTTP-FLV
怎么用 hls.js 播 HLS 直播流
hls.js 是最轻量、兼容性最好的方案，它把 HLS 流喂给 <video></video> 的 MSE 接口，绕过浏览器原生限制。
使用场景：你拿到的是一个 https://xxx.com/live/stream.m3u8 地址，且希望在 Chrome/Firefox/Edge 上稳定低延迟播放。
- 必须引入
hls.js（CDN 或 npm），不能只靠<video src="xxx.m3u8"></video> - 初始化前检查
Hls.isSupported()，不支持时降级到<video></video>原生加载（仅 Safari） - 设置
liveSyncDurationCount: 2控制缓冲段数，避免越播越卡；maxBufferLength: 5防止内存暴涨 - 监听
hls.on(Hls.Events.ERROR, ...)，尤其注意networkError和fatal类型，fatal必须调用hls.destroy()+ 重建实例
简短示例：
<video id="video" controls></video><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><script>
const video = document.getElementById('video');
if (Hls.isSupported()) {
const hls = new Hls({ liveSyncDurationCount: 2 });
hls.loadSource('https://xxx.com/live/stream.m3u8');
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://xxx.com/live/stream.m3u8';
}
</script>
为什么 HTTP-FLV 比 HLS 延迟低
因为 HLS 默认切片 10 秒，即使调小到 2 秒，也要等完整分片下载+解析+解码，端到端延迟通常 8–20 秒；而 HTTP-FLV 是长连接流式传输，配合 flv.js 可压到 1–3 秒。
但代价明显：需要后端支持 HTTP-FLV 输出（如 nginx-rtmp-module 或 SRS），且所有逻辑必须由 JS 处理，<video></video> 只是渲染容器。
-
flv.js不支持audioOnly模式，音视频必须一起传 - 必须手动处理
onRemux和onDemux错误，否则静音/花屏不报错 - 移动端 WebView（尤其微信内置）对长连接不稳定，容易触发
net::ERR_CONNECTION_ABORTED，需加重连逻辑 -
flv.js的enableWorker: true在低端 Android 上反而更卡，建议关闭
CORS 和 HTTPS 混合内容是硬门槛
现代浏览器强制要求：如果页面是 https://，那么视频流地址也必须是 https://，否则直接拒绝加载（Mixed Content 错误）。同时，流服务器必须返回正确的 CORS 头，否则 hls.js 或 flv.js 读取分片时会失败。
常见错误现象：Access to fetch at 'xxx.ts' from origin 'https://yoursite.com' has been blocked by CORS policy
- 服务器需返回：
Access-Control-Allow-Origin: *（或精确域名）、Access-Control-Allow-Credentials: true（若带 cookie） - 对于
HLS，.m3u8和所有.ts文件都要生效；对于HTTP-FLV，整个流 URL 都要能跨域 - Nginx 示例配置中漏掉
add_header Access-Control-Allow-Headers "Range";，会导致 Safari 下HLS播放失败 - 本地开发用
file://协议？直接放弃，必须起本地 server（python3 -m http.server或live-server）
真正在意延迟和稳定性的人，最后都会自己搭 SRS 或 nginx + rtmp，并严格配好 CORS 和 HTTPS 终端。别指望用一个 public 的 .m3u8 地址就跑通全平台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
