简介这份资源面向需要在网页中嵌入流媒体播放功能的开发者尤其是使用 Red5 搭建流媒体服务、希望播放 flv 与 mp4 格式视频的前后端人员。包内提供 flowplayer 播放器核心脚本与 RTMP 插件配合示例页面演示如何在 Web 端完成播放器初始化与流地址配置适合具备一定前端与流媒体基础的中级开发者参考。压缩包共 8 个文件约 201KB包含 3 个 swf 播放器与控件文件、1 个 js 核心脚本、1 个 css 样式、1 个 html 示例页以及 2 个说明文本结构紧凑便于快速集成到现有项目中。目前已有 653 人学习下载。通过该资源可掌握 flowplayer 在网页中的嵌入方式、RTMP 流媒体播放配置要点以及播放器控件与样式的基本调整方法为搭建可用的 Web 流媒体播放页面提供可直接复用的文件与排错参考。1. 把 RTMP 流塞进浏览器flowplayer 嵌入方案还能怎么用直播推流、在线教育、安防预览这类场景里服务端跑着 Red5 或 nginx-rtmp前端却卡在「浏览器不认 RTMP」这道坎上。Flash 退役之后纯video标签只能吃 HLS、DASH、MP4直接喂rtmp://地址必然黑屏。flowplayer 这套老牌播放器之所以还在被翻出来用是因为它把「RTMP 播放」这件事封装成了可配置的嵌入组件配合 Red5 的rtmp应用名和流名能在支持 Flash 的运行环境里把流拉起来。这篇不是讲 RTMP 协议原理而是把一份可落地的 flowplayer 嵌入资源拆开它由哪些文件组成、参数怎么填、Red5 侧要开什么、以及 2024 年还坚持用这套方案时绕不开的兼容性坑。适合手里有存量 RTMP 服务、需要快速给 Web 页面加播放能力的运维和前端。2. flowplayer 嵌入包拆解文件构成与 Red5 对接点拿到一份 flowplayer 嵌入资源第一件事不是急着往页面里贴代码而是先看清包里到底有什么。常见的目录结构是flowplayer/下放flowplayer.min.js、flowplayer.swf、flowplayer.controls.swf外加一个example.html或demo/目录。flowplayer.swf是核心播放器本体flowplayer.controls.swf是控制条皮肤两者版本号必须一致混用会出现控制条不显示或点击无响应。flowplayer.min.js负责在页面里生成object/embed标签并注入 Flash 参数它本身不解码视频只是「壳」。2.1 核心文件与版本对应关系一份典型的 flowplayer 3.x 嵌入包文件清单大致如下文件作用缺失后果flowplayer.min.js页面侧初始化脚本播放器无法生成flowplayer.swf播放器核心黑屏控制台报找不到 swfflowplayer.controls.swf控制条无播放/暂停/音量按钮flowplayer.rtmp.swfRTMP 流处理插件只能播 HTTP 渐进式RTMP 地址无效example.html参考嵌入示例无但少了对照这里要特别注意flowplayer.rtmp.swf很多精简包会把它漏掉结果就是 MP4 能播、rtmp://地址死活连不上。判断方法很简单打开flowplayer.min.js搜索rtmp关键字如果没有任何plugins里rtmp的默认路径配置基本可以确认这个包不支持 RTMP需要单独补插件。2.2 Red5 侧的应用名与流名约定flowplayer 播放 RTMP 时地址格式是rtmp://host:1935/appName/streamName。Red5 默认安装后会自带oflaDemo应用路径在webapps/oflaDemo/。如果你自己建应用比如叫live那目录就是webapps/live/里面要有WEB-INF/red5-web.xml和WEB-INF/web.xml。流名不是文件名而是 Red5 内部IServiceStreamManager注册的流标识。用 OBS 推流到 Red5 时推流地址填rtmp://host:1935/live流密钥填mystream那么 flowplayer 侧播放地址就是rtmp://host:1935/live/mystream。提示Red5 的rtmp端口默认 1935如果前面挂了 nginx 做 1935 转发flowplayer 里仍然写 1935不要写成 80RTMP 不走 HTTP 端口。2.3 嵌入页面的最小结构一个能跑起来的最小 HTML 结构如下注意id要和 JS 初始化里的选择器一致!DOCTYPE html html head meta charsetutf-8 titleRTMP 播放测试/title !-- flowplayer 核心脚本路径按实际部署调整 -- script src/static/flowplayer/flowplayer.min.js/script /head body !-- 播放器容器flowplayer 会往这个 div 里注入 Flash 对象 -- div idplayer stylewidth:640px;height:360px;/div script // 初始化播放器绑定到 #player 容器 flowplayer(player, /static/flowplayer/flowplayer.swf, { // 声明 RTMP 插件路径必须指向 flowplayer.rtmp.swf plugins: { rtmp: { url: /static/flowplayer/flowplayer.rtmp.swf } }, // 剪辑列表这里只放一个 RTMP 流 clip: { url: mystream, // 流名不含应用名 provider: rtmp, // 指定用 rtmp 插件处理 live: true, // 直播流必须置 true点播可省略 autoPlay: true, scaling: fit // 画面缩放模式 }, // RTMP 连接地址netConnectionUrl 指向应用名 netConnectionUrl: rtmp://192.168.1.100:1935/live }); /script /body /html这段代码的逻辑是flowplayer()第一个参数是容器 id第二个是播放器 swf 路径第三个是配置对象。clip.url只写流名netConnectionUrl写完整的rtmp://host:port/appName两者拼接才是最终地址。live: true告诉播放器这是直播流不要尝试 seek否则进度条会异常。scaling: fit在直播场景比scale更常用避免画面拉伸变形。参数说明autoPlay在部分浏览器会被拦截需要用户手势触发这是浏览器策略不是 flowplayer 的问题provider必须和plugins里的 key 一致写错会回退到默认 HTTP 处理导致 RTMP 地址被当普通文件请求而 404。3. 从 Red5 推流到页面播放完整链路实操光有前端嵌入代码不够得有一条能验证的链路。这一章按「Red5 起服务 → 推流 → 页面播放 → 抓包确认」的顺序走一遍每一步都给可执行的命令和检查点。3.1 Red5 服务启动与应用检查Red5 装好后Linux 下一般用service red5 start或直接跑red5.sh。启动后先确认端口# 查看 1935 端口是否监听Red5 的 RTMP 默认端口 netstat -tlnp | grep 1935 # 查看 Red5 日志确认应用加载成功 tail -f /usr/local/red5/log/red5.log | grep -i oflaDemo\|live如果 1935 没监听先看 Red5 是否真的起来了再看conf/red5.properties里rtmp.port有没有被改。日志里出现Application live created之类的字样说明应用加载成功。常见做法是先用自带的oflaDemo验证再换自己的应用名减少变量。3.2 用 ffmpeg 模拟推流没有摄像头或 OBS 时用 ffmpeg 推一个测试流最省事# 推一个测试图案到 Red5 的 live 应用流名 mystream ffmpeg -re -f lavfi -i testsrcsize640x360:rate25 \ -f lavfi -i sinefrequency1000 \ -c:v libx264 -preset ultrafast -tune zerolatency \ -c:a aac -ar 44100 \ -f flv rtmp://192.168.1.100:1935/live/mystream参数含义-re按真实时间推流不加会瞬间推完testsrc生成测试画面-tune zerolatency降低编码延迟直播场景常用-f flv是 RTMP 的封装格式。推流成功后Red5 日志里会出现publish相关记录。如果 ffmpeg 报Connection refused检查 Red5 是否监听在0.0.0.0而不是仅127.0.0.1。3.3 页面侧播放与抓包验证页面打开后如果黑屏先按 F12 看 Console 和 Network。Flash 环境下RTMP 连接不走 Network 面板的 XHR而是走 Flash 自己的 socket所以 Network 里看不到rtmp://请求是正常的。验证连接是否建立靠 Red5 日志# 实时看 Red5 的连接与播放日志 tail -f /usr/local/red5/log/red5.log | grep -i connect\|play\|subscribe看到subscribe或play记录说明 flowplayer 已经连上并请求了流。如果只有connect没有play多半是clip.url流名写错或者netConnectionUrl的应用名和 Red5 实际应用对不上。这一步是排查 RTMP 问题的核心因为浏览器侧几乎给不出有效错误信息Red5 日志才是黑匣子。注意flowplayer 的 RTMP 播放依赖 FlashChrome 从 88 版本起彻底移除 Flash 支持必须用支持 Flash 的旧版浏览器或企业内嵌 Chromium 环境这是方案能否落地的前提。4. 避坑与排查RTMP 嵌入最常见的五类翻车这套方案年代久远坑集中在环境、路径和参数三处。下面五条是我在实际部署里反复遇到的按「现象 → 原因 → 解决」写清楚。现象一页面一直转圈Red5 日志无任何连接记录。原因flowplayer.swf路径 404播放器根本没加载起来。 解决浏览器直接访问 swf 的 URL确认能下载检查 web 服务器 MIME 类型是否把.swf当成了application/x-shockwave-flash类型不对 Flash 不执行。现象二MP4 能播换成rtmp://就黑屏。原因包里缺flowplayer.rtmp.swf或者plugins.rtmp.url路径写错。 解决确认插件文件存在路径用绝对路径或相对于页面 URL 的路径不要用相对于 swf 的路径flowplayer 解析规则容易搞混。现象三Red5 日志显示 connect 成功但立刻 disconnect。原因netConnectionUrl里的应用名不存在或应用未启动。 解决核对webapps/下是否有对应目录red5-web.xml里contextPath是否匹配重启 Red5 后确认日志里应用创建成功。现象四直播流播放几秒后卡住进度条乱跳。原因clip.live没设成true播放器按点播处理尝试缓冲和 seek。 解决直播流必须显式live: true同时autoBuffering设为false避免播放器预加载不存在的「后续内容」。现象五控制条不显示或按钮点了没反应。原因flowplayer.controls.swf版本和flowplayer.swf不一致。 解决两个文件从同一个发布包取不要混用不同版本控制条路径在plugins.controls.url里配置确认指向正确。5. 兼容性收口与参数调优让老方案多撑一阵flowplayer RTMP 这套组合的寿命取决于运行环境里还有没有 Flash。如果必须用几个参数调优能明显改善体验。bufferLength控制缓冲秒数直播场景设 1 到 3 秒太大延迟高太小易卡顿autoBuffering: false配合live: true是直播标配scaling在监控多画面场景用fit单画面全屏用scale再配合容器比例。验证方法上我习惯用 ffmpeg 推流后先在 Red5 日志确认play记录再在页面看画面。如果画面出来但音画不同步多半是推流端-ar和编码参数问题不是 flowplayer 的锅。另一个技巧是给netConnectionUrl加?参数做多流切换比如rtmp://host/live?stream1但 Red5 侧要配合IServiceStreamManager做流名解析不是所有版本都支持用之前先在测试环境验证。从那以后我每次部署这类老播放器都强制先跑一遍「ffmpeg 推流 → Red5 日志确认 → 页面播放」三步不跳过任何一步因为 RTMP 的问题在浏览器侧几乎不可见只有服务端日志能给出真相。希望帮到你。本文还有配套的精品资源点击获取
