html5视频直播可行，关键在于协议选择与兼容适配：hls需hls.js支持桌面端；http-flv依赖flv.js实现低延迟；webrtc提供超低延迟但需信令及stun/turn服务器；video标签属性如autoplay、playsinline等影响播放体验。
HTML5 视频直播完全可行，核心在于选对流媒体协议，并让 <video></video> 标签正确加载和解析它。浏览器原生支持有限，多数情况下需搭配 JS 库补足能力，关键不是“能不能播”，而是“怎么播得稳、播得准、播得兼容”。
HLS 协议：移动端首选，需 hls.js 补齐兼容性
HLS 是目前最成熟、兼容性最广的直播方案，iOS 和 Android 原生支持 .m3u8 文件，但 Chrome、Firefox 等桌面浏览器不原生支持，必须引入 hls.js。
- 在 HTML 中写好
<video id="player" controls></video>，不要直接设src - 引入 hls.js：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> - JS 中判断支持性：
if (Hls.isSupported())，成立则创建 Hls 实例并loadSource('xxx.m3u8')，再attachMedia(video) - 若为 Safari（12.1+）或 iOS WebView，可跳过 hls.js，直接
video.src = 'xxx.m3u8'，并监听loadedmetadata后调用play() - 务必加
crossOrigin="anonymous"属性，避免跨域报错
HTTP-FLV：低延迟场景可用，依赖 flv.js 解析
FLV 流比 HLS 延迟更低（通常 1–3 秒），适合连麦、答题等强实时交互，但所有浏览器都不原生支持，必须靠 flv.js 解析渲染。
- 引入 flv.js：
<script src="https://cdn.jsdelivr.net/npm/flv.js@latest"></script> -
<video id="player" controls></video>同样不设src - 创建 FlvPlayer 实例时传入
{ isLive: true, enableStallDetection: true }，显式声明直播模式 - URL 必须是 HTTP 协议（不能是 HTTPS 推流地址混用 HTTP 播放），且服务端需开启 CORS
- 注意：flv.js 不支持音视频分离的流，推流端需确保 FLV 封装完整
video 标签关键属性：控制播放行为与兼容表现
标签本身不决定能否播直播，但属性直接影响用户体验，尤其在移动设备上。
-
autoplay：现代浏览器普遍要求用户手势触发后才允许自动播放，建议搭配muted使用（静音可绕过限制） -
playsinline和webkit-playsinline：iOS 上强制内联播放（不全屏），微信 iOS 客户端需同时加这两个属性 -
x5-video-player-type="h5"：安卓微信专用，启用 H5 播放器而非内置 X5 内核全屏播放器 -
poster：设置首帧封面，提升首屏感知；直播无首帧时可设占位图 - 避免在 video 上叠加 DOM 元素（如弹幕、按钮），Android 部分机型会因 video 层级过高导致遮挡
WebRTC：真正实时，但需信令与服务器协同
WebRTC 不走传统流媒体协议，而是基于 P2P 或 SFU 架构直传音视频帧，端到端延迟可压至 300ms 内，适合互动直播，但开发复杂度高。
- 播放端无需
<source></source>，而是通过RTCPeerConnection接收远端 track 并绑定到<video></video> - 必须配置 STUN/TURN 服务器，否则 NAT 穿透失败会导致黑屏
- 服务端需提供信令通道（WebSocket 或 HTTP API），用于交换 SDP 和 ICE candidate
- 移动端兼容性仍存差异：iOS Safari 支持有限（如不支持 simulcast），部分安卓 WebView 需降级 fallback
- 不推荐纯 WebRTC 做大规模观众分发，应搭配 SFU（如 Mediasoup、LiveKit）扩展
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
