如何在HTML中嵌入RTMP流媒体视频？含指定RTMP链接实现方案

阿华AIGC实验室

2026-5-15

在HTML中嵌入RTMP流媒体的方法及针对指定链接的实现步骤

嘿，先给你明确一个核心前提：现代主流浏览器（Chrome、Firefox、Edge、Safari这些）已经彻底移除了Flash插件支持，而原生HTML5的<video>标签本身并不兼容RTMP协议。所以直接在HTML里嵌入RTMP流需要借助工具或者转码方案，下面分两种可行的方案来讲解，同时针对你提供的链接 http://42.116.119.44:4022/udp/225.1.2.244:30120 给出具体操作步骤。

方案一：用支持RTMP的播放器（依赖Flash，仅适合测试/老环境）

虽然Flash已经被淘汰，但如果只是用于内部测试或者有仍支持Flash的老浏览器场景，可以用Video.js配合它的Flash插件来实现。

具体操作步骤：

先引入Video.js的资源（用CDN最方便），在HTML的<head>里加这段代码：

<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

在HTML的<body>中添加播放器容器：

<video
  id="rtmp-player"
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  data-setup='{"techOrder": ["flash", "html5"]}'
>
  <source src="rtmp://42.116.119.44:4022/udp/225.1.2.244:30120" type="rtmp/mp4" />
  <p class="vjs-no-js">
    请启用JavaScript，或者升级到支持HTML5视频的浏览器才能观看
  </p>
</video>

注意：要把原链接的http改成rtmp，因为RTMP协议的标准前缀是rtmp://。

（可选）手动初始化播放器：
如果不想用data-setup属性自动初始化，也可以写JS代码手动配置：

const player = videojs('rtmp-player', {
  techOrder: ['flash', 'html5'],
  controls: true,
  autoplay: false,
  preload: 'auto'
});

划重点：这个方案局限性极强，现在几乎没有主流浏览器支持Flash了，所以只适合临时测试，绝对不推荐用于生产环境。

方案二：将RTMP转码为HTML5支持的协议（生产环境首选）

这是目前最通用、最稳定的解决方案——通过流媒体服务器（比如Nginx+RTMP模块、SRS、OBS）把RTMP流转成HLS（HTTP Live Streaming）或者DASH这类HTML5原生支持的协议，然后用原生<video>标签或者Video.js来播放。

具体操作步骤（以Nginx+RTMP模块为例）：

搭建带RTMP模块的Nginx服务器：

你可以编译安装带RTMP模块的Nginx，或者在Ubuntu这类系统里用第三方源安装预编译好的包。

编辑Nginx的配置文件nginx.conf，添加RTMP模块的配置：

rtmp {
    server {
        listen 1935; # RTMP协议的默认端口
        chunk_size 4096;

        application live {
            live on;
            # 开启HLS转码
            hls on;
            hls_path /usr/local/nginx/html/hls; # 存放HLS切片的目录，要提前创建并设置好读写权限
            hls_fragment 5s; # 每个切片的时长，建议5秒左右
            hls_playlist_length 20s; # 播放列表保留的切片总时长
        }
    }
}

重启Nginx服务，让配置生效。

拉取目标RTMP流到Nginx并转码：
使用ffmpeg工具把你提供的RTMP流推送到Nginx的RTMP应用中，命令如下：
```
ffmpeg -i rtmp://42.116.119.44:4022/udp/225.1.2.244:30120 -c copy -f flv rtmp://localhost/live/myStream
```
这里的myStream是你自定义的流名称，后面播放HLS流时会用到它。

在HTML中播放转码后的HLS流：
原生HTML5对HLS的支持有差异（Safari原生支持，Chrome/Firefox需要借助插件），所以推荐用Video.js来兼容所有浏览器：

在HTML的<head>里引入Video.js和HLS插件：

<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@videojs/http-streaming@3.10.0/dist/videojs-http-streaming.min.js"></script>

在<body>中添加播放器：

<video
  id="hls-player"
  class="video-js vjs-big-play-centered"
  controls
  width="640"
  height="360"
  data-setup='{}'
>
  <source src="http://你的Nginx服务器IP/hls/myStream.m3u8" type="application/x-mpegURL" />
  <p class="vjs-no-js">
    请启用JavaScript，或者升级到支持HTML5视频的浏览器才能观看
  </p>
</video>

把你的Nginx服务器IP替换成你的Nginx服务器的公网IP或者域名，myStream.m3u8就是转码后的HLS播放列表文件。