简介面向需要在网页端集成流媒体播放能力的开发者这份资源提供了一套基于 Flowplayer 的完整嵌入方案重点解决 RTMP 流在浏览器中的播放问题。包内共 8 个文件以 swf 播放器核心与插件、js 脚本、html 示例页为主辅以 css 样式与说明文本压缩包约 201KB体积轻量便于快速引入现有项目。示例页面演示了播放器初始化与 RTMP 连接配置配合 Red5 流媒体服务器可播放 flv、mp4 格式内容作者已实际测试通过适合作为搭建网页直播或点播功能的参考起点。已有 656 人学习下载读者可从中获取播放器版本搭配、插件加载顺序与服务器对接的现成配置减少自行摸索 Flash 播放器与 RTMP 协议适配的时间成本并据此扩展控制条、清晰度切换等常见需求。1. 网页里嵌个流媒体播放器为什么我坚持先锁版本再动手上周帮一个做在线课堂的朋友救火页面里嵌的播放器突然黑屏控制台只丢一句Flash is not supported。翻他代码才发现flowplayer用的是 CDN 上随手拉的 7.x 版本浏览器早就不认 Flash 内核了。这类「网页嵌入 flowplayer 流媒体播放器」的活儿看着只是贴一段 JS实际牵扯播放器版本、RTMP 协议、服务端 Red5 三头对齐任何一头版本错位页面就是一块黑砖。这篇笔记按我自己的装机顺序写先把 flowplayer 和 Red5 的版本关系捋清再一步步装服务端、配播放器、验证拉流最后把踩过的坑摊开。适合正在给网页加直播/点播能力、又不想被 Flash 历史包袱拖住的开发者新手能照着走通熟手能直接抄参数取舍。2. 装前把版本和环境钉死flowplayer、RTMP 与 Red5 的三角关系2.1 先搞清楚 flowplayer 各版本对 RTMP 的支持边界flowplayer 这条产品线跨度很大早期 3.x、5.x 靠 Flash 插件播 RTMP6.x 开始往 HTML5 迁移7.x 之后官方主推 HLS/DASHRTMP 基本交给 Flash 回退或第三方插件。你要在网页里播 RTMP 流核心判断是播放器端到底走 Flash 还是走转封装。如果目标浏览器还允许 Flash内网、老系统、特定终端用 flowplayer 5.4.x 或 6.0.x 配rtmp插件最省事如果是公网现代浏览器Flash 已经死透正确做法是服务端把 RTMP 转成 HLSflowplayer 7.x 用hlsjs插件播而不是硬怼 RTMP。我一般会先列一张版本对照表避免装到一半发现插件不兼容组件推荐版本作用备注flowplayer7.2.x网页播放器核心纯 HTML5配 hlsjs 插件flowplayer5.4.x老项目兼容依赖 Flash仅限内网/老终端flowplayer hlsjs 插件与主版本同号播 HLS7.x 必装Red51.3.xRTMP 流媒体服务端稳定分支Java 8 运行Red52.0.x新特性分支需 Java 11插件生态略乱JDK8u202 / 11.0.x跑 Red5跟 Red5 大版本对齐这张表不是让你全装而是先选定一条路线。公网直播我走「Red5 收 RTMP → 转 HLS → flowplayer 7.x 播」内网老系统我走「Red5 收 RTMP → flowplayer 5.4.x Flash 播」。两条路线的安装步骤前半段一样后半段播放器配置不同。2.2 服务端 Red5 的运行环境JDK 选错直接起不来Red5 是 Java 写的JDK 版本是第一个硬门槛。Red5 1.3.x 官方跑在 Java 8 上你用 Java 11 启动大概率在加载spring相关包时抛UnsupportedClassVersionErrorRed5 2.0.x 才正式支持 Java 11。所以装之前先确认本机 JDK# 查看当前 JDK 版本确认是 1.8 还是 11 java -version # 如果系统里有多个 JDK用这个看实际生效路径 which java输出里version 1.8.0_202就走 Red5 1.3.xversion 11.0.x就走 Red5 2.0.x。我习惯把 JDK 装到固定目录比如/opt/jdk1.8.0_202然后在启动脚本里显式指定JAVA_HOME不依赖系统默认避免换终端就变版本。这一步看着琐碎但后面 Red5 起不来时第一个要排查的就是它。2.3 端口和目录规划别等冲突了再改Red5 默认占 5080HTTP和 1935RTMP。1935 是 RTMP 标准端口一般没人抢5080 容易和本机其他 Web 服务撞。装之前先探一下# 检查 1935 和 5080 是否被占用有输出说明已被占 ss -lntp | grep -E 1935|5080如果 5080 被占不用慌Red5 的conf/red5.properties里能改http.port。我一般规划成Red5 装/opt/red5流文件目录/opt/red5/webapps/oflaDemo/streams播放器静态页放 Nginx 的/usr/share/nginx/html下。目录分开的好处是升级 Red5 不碰前端前端改样式不碰流服务。3. 装 Red5 服务端从解压到第一个 RTMP 流推上去3.1 下载与解压认准发行包别拉源码自己编Red5 发行包是 zip 格式解压即用不需要编译。我一般从官方发行页拿red5-server-1.3.0.zip这类包放到/opt下解压# 进入安装目录解压发行包 cd /opt unzip red5-server-1.3.0.zip # 重命名成短目录方便脚本引用 mv red5-server-1.3.0 red5 # 给启动脚本执行权限 chmod x /opt/red5/red5.sh解压后目录结构里red5.sh是 Linux 启动脚本conf/放配置webapps/放应用自带oflaDemo演示应用log/是日志。这里有个细节zip 包在 Linux 下解压后red5.sh可能没有执行位必须手动chmod否则./red5.sh报Permission denied新手常卡在这。3.2 启动参数与 JAVA_HOME写进启动脚本才稳直接./red5.sh启动会读系统环境变量多 JDK 机器上容易跑错版本。我的做法是改red5.sh开头显式钉死JAVA_HOME# 编辑启动脚本在文件靠前位置加入示例路径按实际 JDK 改 export JAVA_HOME/opt/jdk1.8.0_202 export PATH$JAVA_HOME/bin:$PATH # 启动 Red5后台运行并把日志落到 log 目录 cd /opt/red5 ./red5.sh /opt/red5/log/console.log 21 JAVA_HOME指向 JDK 根目录不是binPATH前置保证java命令走这个 JDK。后台启动后看console.log出现Red5 Server started或Server started字样才算起来。如果日志里刷ClassNotFoundException或UnsupportedClassVersionError八成是 JDK 版本和 Red5 不匹配回到 2.2 节对版本。3.3 用 oflaDemo 推一路测试流先证明服务端活着Red5 自带oflaDemo应用专门用来验证 RTMP 收发。启动成功后用 ffmpeg 往它推一路本地视频# 把本地 mp4 循环推成 RTMP 流推到 oflaDemo 的 livestream ffmpeg -re -i /path/to/test.mp4 -c copy -f flv \ rtmp://127.0.0.1:1935/oflaDemo/livestream-re表示按原始帧率推模拟直播节奏-c copy不转码直接封装成 flv-f flv指定 RTMP 承载格式。推流命令跑起来不报错、终端持续输出帧信息说明 Red5 的 RTMP 入口通了。这一步是分水岭服务端通了后面播放器才有东西可播不通就先别碰前端否则黑屏了分不清是播放器还是服务端的问题。3.4 把 RTMP 转成 HLS给现代浏览器留后路公网场景 Flash 不可用得让 Red5 或旁路把 RTMP 转 HLS。轻量做法是用 ffmpeg 旁路转封装把同一路流同时输出 HLS 切片# 从 Red5 拉 RTMP转成 HLS 切片写到 Nginx 静态目录 ffmpeg -i rtmp://127.0.0.1:1935/oflaDemo/livestream \ -c:v libx264 -c:a aac -f hls \ -hls_time 4 -hls_list_size 6 \ -hls_segment_filename /usr/share/nginx/html/hls/seg_%03d.ts \ /usr/share/nginx/html/hls/index.m3u8-hls_time 4是切片时长直播一般 26 秒太短请求多、太长延迟大-hls_list_size 6是播放列表保留的切片数配合 4 秒切片约 24 秒窗口。转出来的index.m3u8放 Nginx 静态目录flowplayer 7.x 直接播这个地址。这样 RTMP 负责收流、HLS 负责分发播放器端彻底摆脱 Flash。4. 网页嵌入 flowplayer初始化参数与 RTMP/HLS 两种接法4.1 引入播放器资源本地托管比 CDN 可控flowplayer 7.x 需要主 JS、CSS 和 hlsjs 插件。生产环境我倾向本地托管避免 CDN 抖动或版本漂移!-- 引入 flowplayer 核心样式与脚本路径按本地实际目录 -- link relstylesheet href/static/flowplayer/flowplayer.css script src/static/flowplayer/flowplayer.min.js/script !-- 播 HLS 必须额外引入 hlsjs 插件 -- script src/static/flowplayer/hlsjs.min.js/script顺序不能乱主脚本先加载插件后加载否则插件注册不上初始化时报no suitable engine。CSS 只管皮肤漏了不影响播放但控件会错位。本地目录建议按版本号分层比如/static/flowplayer/7.2.1/升级时整目录替换回滚也干净。4.2 初始化播放器HLS 接法的参数取舍容器给一个固定宽高比的 div初始化时指定clip和ratio// 等 DOM 就绪后初始化避免容器还没渲染就找节点 window.addEventListener(DOMContentLoaded, function () { flowplayer(#player, { // HLS 地址指向 Nginx 托管的 m3u8 clip: { sources: [ { type: application/x-mpegURL, src: /hls/index.m3u8 } ] }, // 16:9 自适应避免移动端拉伸 ratio: 9 / 16, // 直播场景关掉进度条拖动 live: true, // 自动播放受浏览器策略限制静音可提高成功率 autoplay: false, muted: false }); });type: application/x-mpegURL是 HLS 的 MIME 标识写错插件不接管ratio是宽高比不是像素live: true会隐藏进度条并禁用 seek点播场景要设false。自动播放这块是玄学现代浏览器要求静音才允许自动播所以autoplay: true时通常得配muted: true否则控制台报NotAllowedError。4.3 老项目走 RTMPflowplayer 5.4.x 的 Flash 接法如果目标终端还允许 Flash内网大屏、老教学机用 flowplayer 5.4.x 直接播 RTMP!-- flowplayer 5.x 依赖 Flash需引入 rtmp 插件 -- script src/static/flowplayer/5.4.6/flowplayer.min.js/script script src/static/flowplayer/5.4.6/flowplayer.rtmp.min.js/script script // 容器 id 为 playerclip 指向 Red5 的 RTMP 地址 flowplayer(player, /static/flowplayer/5.4.6/flowplayer.swf, { clip: { url: livestream, // 关键provider 指定 rtmp并给出连接地址 provider: rtmp, live: true }, plugins: { rtmp: { // netConnectionUrl 指向应用根不是具体流名 netConnectionUrl: rtmp://127.0.0.1:1935/oflaDemo } } }); /script这里最容易错的是netConnectionUrl和url的分工netConnectionUrl到应用名oflaDemo为止url只写流名livestream拼起来才是完整 RTMP 地址。很多人把完整地址塞进url结果播放器报NetConnection.Connect.Failed。另外flowplayer.swf路径必须对5.x 没有它起不来。4.4 参数对照两种接法别混用参数HLS 接法7.xRTMP 接法5.4.x说明主脚本flowplayer.min.jsflowplayer.min.js版本不同插件hlsjs.min.jsflowplayer.rtmp.min.js按协议选流地址m3u8 完整 URL应用根 流名拼接方式不同livetrue 隐藏进度条true 隐藏进度条语义一致依赖无Flash 运行时公网已不可用混用的典型翻车是7.x 里写provider: rtmp插件根本没加载播放器静默失败或者 5.4.x 里塞 m3u8 地址Flash 不认 HLS。选路线时就把这张表贴在手边配置时逐项对。5. 避坑与排查黑屏、连不上、卡顿的现场记录5.1 现象页面黑屏控制台报 Flash 相关错误原因用了 flowplayer 5.x 的 RTMP 接法但浏览器已禁用 Flash或根本没装 Flash 运行时。解决公网环境直接切 7.x HLS 路线别在 Flash 上耗内网确需 Flash 的确认浏览器版本和 Flash 插件白名单同时把flowplayer.swf路径核对一遍。5.2 现象播放器加载了但一直转圈不报错原因HLS 切片没生成或 Nginx 没托管到。先curl一下 m3u8 地址看返回是不是 404再看 ffmpeg 转封装进程是否还活着ps aux | grep ffmpeg。解决确认hls_segment_filename目录存在且 Nginx 有读权限m3u8 里引用的.ts切片路径要和实际存放一致相对路径最容易错。5.3 现象RTMP 推流报Connection refused原因Red5 没起来或 1935 端口没监听。ss -lntp | grep 1935没输出就是服务端问题。解决看/opt/red5/log/console.log常见是 JDK 版本不匹配或JAVA_HOME没生效端口被占则改conf/red5.properties里的rtmp.port推流地址同步改。5.4 现象能播但延迟十几秒直播像录播原因HLS 切片太长或列表窗口太大。-hls_time 10配-hls_list_size 10光缓冲就上百秒。解决直播场景把hls_time压到 24 秒hls_list_size降到 36播放器端别额外加大缓冲对延迟极敏感的场景考虑换低延迟协议而不是死磕 HLS 参数。5.5 现象换台机器部署同样的包起不来原因red5.sh里写死的JAVA_HOME路径在新机器不存在或解压后丢了执行位。解决部署脚本里加一步chmod x red5.shJAVA_HOME用环境探测而不是硬编码或者把 JDK 一起打进部署包。我现在的习惯是部署前先跑一遍java -version和ls -l red5.sh两个都对了再启动。6. 装完怎么验证跑通三层检查法收尾装完别急着交付我一般按「服务端 → 流 → 播放器」三层各验一遍任何一层不过就不往下走。第一层验服务端ss -lntp | grep -E 1935|5080两个端口都在监听curl -I http://127.0.0.1:5080/返回 200说明 Red5 的 HTTP 和 RTMP 都活着。第二层验流ffmpeg 推流命令持续输出帧信息不中断同时ls -lh /usr/share/nginx/html/hls/能看到不断新增的.ts切片和滚动的index.m3u8说明转封装链路通。第三层验播放器浏览器打开页面Network 面板里 m3u8 和 ts 请求全是 200播放器出画面且进度条行为符合live设置。三层里最容易被跳过的是第二层很多人推流命令一跑就去开页面结果切片还没生成页面当然黑。我习惯在推流后等 10 秒再刷页面给切片留出生成时间。验证时还可以用一个对照表快速定位检查项命令/动作通过标准Red5 端口ss -lntp | grep 1935有 LISTENRed5 日志tail -f log/console.log无异常堆栈推流ffmpeg 推流命令持续输出帧HLS 切片ls hls/*.ts文件持续新增播放器请求浏览器 Networkm3u8/ts 均 200还有个小技巧验证 RTMP 本身是否通不必开浏览器直接用 ffplay 拉流最快——ffplay rtmp://127.0.0.1:1935/oflaDemo/livestream能出画面就证明服务端和流没问题剩下黑屏就纯是前端配置的事排查范围一下缩小一半。血泪经验是我曾经因为没验第二层把一个切片目录权限配错的包交付出去对方页面黑屏查了一下午最后发现是 Nginx 对.ts没读权限。从那以后我每次部署完都强制走一遍这三层检查哪怕只是改了个播放器皮肤也要把 m3u8 请求拉出来看一眼 200。希望帮到你少在黑屏上耗时间。本文还有配套的精品资源点击获取