赞片CMSflv.js

照着这篇做完，你能在赞片CMS里把默认播放器换成 flv.js，让 FLV 点播文件和 HTTP-FLV 直播流都能在浏览器里直接播放。

第一步：摸清你的赞片CMS版本和模板目录

这一步的目的，是确认播放页模板和播放器文件到底在哪个目录，后面所有改动都基于这个路径。

先登录服务器，进网站根目录，执行：

ls -d template/*/ | head
find . -name "play.html" -path "*vod*" 2>/dev/null
find . -type d -name "player" 2>/dev/null

赞片CMS V5/V6 的常见结构是：播放页模板在 template/默认模板名/vod/play.html，播放器脚本放在同级的 player/ 或 static/player/ 目录里，里面能看到 youku.js、qq.js、m3u8.js 这类文件。看到这些文件，说明你找对地方了。

注意：赞片CMS 允许后台切换多套模板，你改的必须是「系统 → 基本设置 → 当前模板」里正在启用的那一套，改错模板目录前台不会有任何变化。

第二步：下载 flv.js 到本地

这一步是拿到播放器本体，避免依赖外部 CDN 导致国内访问慢或失效。

打开 <https://github.com/bilibili/flv.js/releases>，下载 flv.min.js（1.6.2 是最后一个正式版），上传到上一步找到的 player/ 目录下，重命名为 flv.js，和 youku.js 放在一起。

注意：不要用 flv.js 的 dist/flv.js 未压缩版，几百 KB 会拖慢播放页首屏；用 flv.min.js。

第三步：在后台注册一个 flv 播放器

这一步是让赞片CMS知道「flv」这个播放器标识该调哪个 js 文件。

进后台，依次点开：顶部菜单「系统」→ 左侧「播放器管理」（部分版本叫「播放器设置」）→ 右上角「添加播放器」。

按下面填：

• 播放器名称：FLV
• 播放器标识／编码：flv
• 播放器文件：flv（只填文件名，不带 .js 后缀，系统会自动拼）
• 状态：启用

保存后回到播放器列表，确认新记录排在最前或状态是「启用」。

注意：播放器标识必须全小写英文，不要写 FLV 或 flv播放器，因为前台播放地址里的前缀要和它完全一致。

第四步：写播放器脚本 flv.js

这一步的结果是前台调用 flv$地址 时，能真正渲染出一个播放器。

新建 player/flv.js，内容如下（赞片CMS 播放器脚本通常暴露一个初始化函数，具体函数名用 cat youku.js 看一下同目录其他文件的写法，对齐即可）：

function FlvPlayer(url, container) {
  var el = document.getElementById(container) || document.body;
  el.innerHTML = '<video id="flvbox" controls autoplay style="width:100%;height:100%;background:#000"></video>';
  if (!flvjs.isSupported()) {
    el.innerHTML = '<p style="color:#fff;padding:20px">当前浏览器不支持 flv.js，请换 Chrome / Edge</p>';
    return;
  }
  var isLive = /\.flv(\?|$)/.test(url) && location.search.indexOf('live=1') > -1;
  var player = flvjs.createPlayer({
    type: 'flv',
    url: url,
    isLive: isLive,
    hasAudio: true
  }, {
    enableWorker: false,
    stashInitialSize: 128
  });
  player.attachMediaElement(document.getElementById('flvbox'));
  player.load();
  player.play();
  window.onbeforeunload = function () { player.destroy(); };
}

isLive 为 true 时是直播流（如 SRS、nginx-rtmp 推出来的 http://xxx/live/stream.flv），为 false 时是普通 FLV 文件。判断不准就先填 false，直播场景再改成 true。

第五步：在播放页模板里加载脚本

回到 template/你的模板/vod/play.html，在 </head> 之前加两行：

<script src="/template/你的模板/player/flv.min.js"></script>
<script src="/template/你的模板/player/flv.js"></script>

路径按第一步查到的实际目录写。保存上传，后台「系统 → 缓存管理」点一次「清除缓存」。

第六步：验证播放

在后台给某部影片的播放地址前面加前缀，格式为：

flv$http://你的域名/upload/video/test.flv

前台打开该影片播放页，按 F12 看 Console：没有红色报错，Network 里能看到 test.flv 的分段请求（状态 206），画面正常出图，就算成功。

注意：如果报 CORS 错误，需要在 Nginx 里给 FLV 所在目录加 add_header Access-Control-Allow-Origin *;；如果一直转圈不起播，多半是服务器没返回 Accept-Ranges: bytes，检查是否用了不支持的存储或 CDN。

小结

• 先确认当前启用模板目录，再动手改文件
• flv.js 用 1.6.2 的 flv.min.js，放本地不放外链
• 后台「播放器管理」新增标识为 flv 的播放器，前台地址写成 flv$地址
• 直播流把 isLive 设为 true，点播设 false
• 播不动先查三件事：跨域头、Range 支持、浏览器兼容性