HTML5直播需按场景选技术：WebRTC适合低延迟互动，video标签配hls.js或flv.js分别支持HLS/HTTP-FLV单向广播；服务端用FFmpeg推流并配置Nginx-rtmp；注意CORS、MSE兼容性及iOS自动播放限制。
如果您希望在网页中实现HTML5直播功能，需根据实际部署环境选择合适的技术路径。WebRTC适用于低延迟双向互动场景，video标签配合HTTP-FLV或HLS推流则适用于单向广播型直播。以下是具体设置方法：
一、使用video标签加载HLS流
HLS（HTTP Live Streaming）是苹果提出的基于HTTP的自适应码率流媒体协议，兼容性好，支持大多数现代浏览器（除原生Safari外需引入hls.js库）。
1、引入hls.js库：在HTML文件的
中添加CDN链接：。2、在页面中添加video标签，并设置id属性：。
立即学习“前端免费学习笔记（深入）”；
3、编写JavaScript初始化HLS播放器：创建HLS实例并绑定到video元素，传入M3U8播放地址。
4、检测浏览器是否原生支持HLS：若为Safari且版本≥12.1，可直接用src赋值；否则必须使用hls.js加载。
二、使用video标签加载HTTP-FLV流
HTTP-FLV通过长连接传输FLV格式音视频数据，延迟低于HLS，但需借助flv.js库解析，不被原生video标签直接支持。
1、引入flv.js库：。
2、添加video标签并设为controls启用控制栏：。
3、创建FlvPlayer实例，配置isLive为true以启用直播模式，并指定FLV流URL（如http://example.com/live/stream.flv）。
4、调用load()和play()方法启动播放，监听error事件捕获解码或网络异常。
三、基于WebRTC实现点对点或MCU架构直播
WebRTC提供原生实时音视频能力，无需插件，通过RTCPeerConnection建立P2P连接或对接SFU/MCU服务器，适合连麦、会议等低延迟交互场景。
1、获取本地媒体流：调用navigator.mediaDevices.getUserMedia({video: true, audio: true})获取摄像头与麦克风权限。
2、创建RTCPeerConnection实例：传入STUN/TURN服务器配置，用于NAT穿透和中继。
3、添加本地流至连接对象：peerConnection.addStream(localStream)（旧API）或使用addTrack()（新API）。
4、生成并交换SDP Offer与Answer：调用createOffer()后设置本地描述，再通过信令服务器发送至远端，接收Answer后设置远程描述。
5、监听track事件将远端视频流绑定至video标签：videoElement.srcObject = event.streams[0]。
四、服务端推流配置（以FFmpeg为例）
前端播放依赖服务端持续输出标准格式流，需确保编码参数符合浏览器解码要求（如H.264 Baseline/Main Profile、AAC-LC）。
1、安装FFmpeg并验证版本支持libx264和libfdk_aac编码器：ffmpeg -encoders | grep -E "(libx264|libfdk_aac)"。
2、推送RTMP流至Nginx-rtmp模块服务器：执行命令ffmpeg -re -i input.mp4 -c:v libx264 -preset fast -b:v 1000k -c:a aac -b:a 128k -f flv rtmp://server/app/stream。
3、配置Nginx-rtmp模块启用HLS切片：在rtmp{}块中添加hls on、hls_path、hls_fragment等指令，确保生成.m3u8及.ts文件。
4、配置HTTP服务静态托管HLS资源：在http{}块中添加location匹配/.m3u8$和/.ts$，启用add_header Cache-Control no-cache。
五、跨域与MSE兼容性处理
video标签加载非同源流时可能触发CORS限制，而flv.js/hls.js依赖MediaSource API（MSE），需确认浏览器支持状态。
1、服务端响应头中添加：Access-Control-Allow-Origin: *（生产环境应限定具体域名）。
2、检查浏览器是否支持MediaSource：if ('MediaSource' in window) { ... }，不支持时降级提示或切换方案。
3、对于Safari iOS/iPadOS，禁用自动播放需显式调用play()并捕获Promise拒绝，添加muted和autoplay属性提升成功率。
4、设置video标签的crossorigin="anonymous"属性，确保fetch请求携带CORS凭据。
