可直接用HTML5 video标签播放实时视频流：一、Safari等支持HLS的浏览器直接src指向.m3u8；二、Chrome等通过hls.js+MSE动态加载；三、RTMP需服务端转HLS/CMAF；四、超低延迟可用WebSocket+MSE手动拼帧。
如果您希望在网页中直接播放实时视频流，而无需依赖第三方插件或复杂框架，则可以利用HTML5原生支持的标签配合MSE（Media Source Extensions）或直接使用HLS/DASH协议兼容方案。以下是实现简易直播流播放的具体步骤：
一、使用
HLS（HTTP Live Streaming）是苹果推出的自适应流媒体协议，Safari浏览器原生支持，部分Android浏览器也具备基础兼容能力。该方法无需JavaScript干预，部署最轻量。
1、确保您的直播服务器输出标准HLS格式（即包含.m3u8索引文件和.ts分片文件）。
2、在HTML中插入标签，并将src属性指向.m3u8地址。
立即学习“前端免费学习笔记（深入）”；
3、添加autoplay、muted和controls属性以提升自动播放成功率（尤其移动端需静音才允许自动播放）。
4、为兼容性考虑，在标签内嵌入type="application/vnd.apple.mpegurl"。
二、通过MSE（Media Source Extensions）动态加载HLS流（Chrome/Firefox/Edge等主流桌面浏览器）
MSE允许JavaScript动态构造媒体流并喂给元素，是实现跨浏览器HLS播放的核心机制。需借助开源库如hls.js完成解析与分片调度。
1、在页面中引入hls.js官方CDN脚本：。
2、创建元素，赋予唯一id（例如video-player），不设置src属性。
3、使用JavaScript检测浏览器是否支持Hls.isSupported()，若支持则实例化Hls对象并绑定至该元素。
4、调用loadSource()方法加载.m3u8 URL，并执行attachMedia()与play()触发播放。
5、若浏览器不支持MSE但支持原生HLS（如Safari），则回退至直接设置video.src为.m3u8地址并调用play()。
三、使用RTMP转封装流（需服务端转协议）
WebRTC本身不直接支持HTML5 播放RTMP，但可通过服务端将RTMP流实时转封装为HLS或低延迟HLS（LL-HLS）、CMAF+MSE等格式。此方式规避了浏览器对RTMP的原生限制。
1、部署支持RTMP输入与HLS/CMAF输出的流媒体服务器（如Nginx-rtmp-module、SRS、OBS搭配Node-Media-Server）。
2、配置服务器将接收到的RTMP流（如rtmp://server/live/stream）自动生成对应.m3u8路径（如http://server/live/stream.m3u8）。
3、在HTML中使用与方法一相同的结构，但src指向服务端生成的.m3u8地址。
4、确保服务端启用CORS头（如Access-Control-Allow-Origin: *），避免跨域请求被浏览器拦截。
四、基于WebRTC DataChannel或WebSocket手动拼帧（适用于超低延迟场景）
当要求端到端延迟低于500ms时，可绕过HLS固有缓冲，采用WebRTC的RTCPeerConnection接收编码帧，或通过WebSocket接收H.264 Annex B裸流，再交由MSE进行解复用与播放。该路径完全可控但开发复杂度高。
1、服务端将直播流按NALU单元切片，通过WebSocket逐帧推送至前端，每帧携带时间戳与类型标识（SPS/PPS/I/P帧）。
2、前端建立MediaSource对象，创建SourceBuffer并指定mime类型为video/mp4; codecs="avc1.42E01E"（需匹配实际编码参数）。
3、监听WebSocket消息，将接收到的H.264帧数据（含起始码0x00000001）转换为Uint8Array，并调用sourceBuffer.appendBuffer()写入。
4、在sourceBuffer的updateend事件中持续追加新帧，维持连续解码流；首次写入前需确保MediaSource.readyState === "open"。
5、注意：必须严格按H.264 Annex B格式组织帧数据，且首个写入块须包含SPS与PPS，否则解码器无法初始化。
