HLS可通过hls.js或video.js在HTML中播放，RTMP需经服务器转为HLS或WebRTC后前端才能播放，推荐使用video.js统一处理兼容性问题，注意延迟、CORS和MIME类型配置。
要在HTML页面中连接和嵌入直播流（如RTMP或HLS），不能直接使用原生<video>标签播放RTMP流，但可以通过合适的技术方案实现HLS和RTMP的播放。以下是具体方法。
1. HLS直播流的嵌入方法
HLS（HTTP Live Streaming）由Apple开发，广泛支持于现代浏览器，尤其是Safari、Chrome等。大多数直播平台（如OBS推流到服务器后）会提供.m3u8格式的HLS地址。
使用video.js或hls.js播放HLS流：
由于部分浏览器（如Chrome）不原生支持HLS，推荐使用JavaScript库hls.js来兼容播放。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<video id="myVideo" controls style="width: 100%; height: auto;"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const video = document.getElementById('myVideo');
const videoSrc = 'https://example.com/live/stream.m3u8'; // 替换为你的HLS地址
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
// Safari等原生支持HLS的浏览器
video.src = videoSrc;
}
</script>
2. RTMP直播流的嵌入方法
RTMP（Real-Time Messaging Protocol）是传统直播推流协议，常用于OBS向服务器推流。但现代浏览器已不再原生支持RTMP（Flash被淘汰），因此不能直接在HTML中用<video>播放rtmp://地址。
解决方案：将RTMP转为HLS或WebRTC
- 使用流媒体服务器（如Nginx-RTMP、Node Media Server、SRS）接收RTMP推流，再转封装为HLS或低延迟的WebRTC流供前端播放。
- 前端只负责播放转换后的HLS（.m3u8）或WebSocket流。
例如：OBS推流到服务器的RTMP地址：rtmp://your-server/live/streamKey
服务器将其转为HLS输出：http://your-server/live/streamKey.m3u8
然后使用上面的hls.js方式嵌入HTML。
3. 使用video.js统一播放HLS流
video.js 是一个功能强大的HTML5视频播放器，支持通过插件播放HLS流，界面美观且兼容性好。
示例代码：
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet">
<video id="myPlayer" class="video-js vjs-default-skin" controls preload="auto" width="800" height="450"></video>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@videojs/http-streaming@3.4.0/dist/videojs-http-streaming.min.js"></script>
<script>
const player = videojs('myPlayer', {
sources: [{
src: 'https://example.com/live/stream.m3u8',
type: 'application/x-mpegURL'
}]
});
</script>
4. 注意事项与建议
- HLS有约10-30秒延迟，若需低延迟直播，可考虑使用WebRTC（如Mediasoup、Janus）或低延迟HLS（LL-HLS）。
- 确保服务器开启CORS权限，避免前端加载流时被跨域阻止。
- m3u8和ts文件的MIME类型需正确配置（如
.m3u8 → application/vnd.apple.mpegurl）。 - 移动端优先测试iOS和Android上的兼容性。
基本上就这些。HLS是目前HTML页面嵌入直播最可行的方式，RTMP需配合服务端中转。选择合适的工具链，直播集成并不复杂但容易忽略细节。
