赞片CMShls.js

学会这篇，你就能自己找到并改对赞片CMS模板里的 CMShls.js，让 PC 浏览器也能正常播放 m3u8 视频，不再出现「手机上能播、电脑上黑屏转圈」的情况。

CMShls.js 不是赞片CMS官方核心文件，它是模板作者在模板里放的一个播放脚本，本质是把「页面上的 video 标签」和「hls.js 这个开源播放库」接起来。所以出问题的地方通常只有三个：文件没加载到、加载顺序错了、播放地址传错了。

第一步：确认你的站点里到底有没有这个文件

这一步要搞清楚文件在不在、路径是什么，结果是你能拿到它的完整磁盘路径。

浏览器端：用 Chrome 打开任意一个播放页，按 F12 打开开发者工具，切到 Network（网络） 面板，在过滤器输入框里敲 CMShls，然后按 F5 刷新页面。看列表里的 Status（状态） 列：显示 200 说明文件正常加载，显示 404 说明路径写错或文件不存在。

服务器端（以宝塔面板为例）：登录宝塔 → 左侧点 文件 → 进入网站根目录（一般是 /www/wwwroot/你的域名）→ 右上角搜索框输入 CMShls.js，勾选「包含子目录」，回车。常见位置是 /template/模板名/js/CMShls.js 或 /static/js/CMShls.js。命令行也可以：

find /www/wwwroot/你的域名 -name "CMShls.js"

注意：赞片CMS 有模板编译缓存，你改了模板里的 js 引用路径，前台可能还是引用旧路径。改完先去后台 系统 → 缓存管理 → 清除全部缓存，再强刷浏览器（Ctrl + F5）。

第二步：打开文件，读懂最关键的三行

这一步是看懂它在干什么，结果是你能判断该改哪里。

用宝塔文件管理器双击打开 CMShls.js，或者下载到本地用 VS Code 打开。不管模板作者写得花不花哨，核心就三行：

var hls = new Hls();          // 创建播放实例
hls.loadSource(url);          // 告诉它播哪个 m3u8
hls.attachMedia(video);       // 绑定到页面上的 video 元素

再往下通常还有一段错误恢复代码，长这样：

hls.on(Hls.Events.ERROR, function (e, data) {
  if (data.fatal) {
    if (data.type === 'networkError') hls.startLoad();
    else if (data.type === 'mediaError') hls.recoverMediaError();
  }
});

这段不能删。m3u8 直播流断一下、切个分片失败很常见，删了就变成「卡一次就永久黑屏」。

第三步：检查 hls.js 主库的引入顺序

这一步保证依赖库在 CMShls.js 之前加载，结果是页面控制台不报 Hls is not defined。

打开播放页对应的模板文件（一般在 /template/模板名/html/play.html 或 vod/play.html），找 <head> 或页面底部的 <script> 标签，顺序必须是：

<script src="/static/js/hls.min.js"></script>
<script src="/static/js/CMShls.js"></script>

在浏览器 Console（控制台） 里输入 Hls.version 和 Hls.isSupported() 回车。前者返回版本号（如 "1.5.7"）、后者返回 true，才算正常。返回 undefined 就是没加载上。

注意：hls.js 的 1.x 版本和 0.x 版本 API 有差别，startLoad()、stopLoad() 在 1.x 上更稳定。别从不同来源混着拷文件，主库和调用脚本尽量用同一套。

第四步：把播放地址从写死改成动态读取

这一步让一个 js 文件服务所有影片，结果是不同剧集点进去播的是各自的地址。

很多模板图省事，直接在 CMShls.js 里写死了 var url = 'http://xxx.com/a.m3u8';，那所有影片都会播同一集。正确做法是在播放页模板的 <video> 上挂一个属性：

<video id="player" data-url="{$vod_play_url}" controls></video>

然后 CMShls.js 里改成：

var url = document.getElementById('player').getAttribute('data-url');

赞片CMS 的模板变量名各版本略有差异，{$vod_play_url}、{$playurl} 都见过，以你模板里实际输出的为准，可以在播放页右键「查看网页源代码」搜 m3u8 确认。

第五步：排查「明明 200 却播不出来」的三种情况

这一步处理最常见的三个坑，结果是你能精准定位是资源问题还是代码问题。

一，跨域和防盗链。看 Network 面板里那个 .m3u8 请求是不是 403。是的话，去资源站后台把本站域名加进白名单，或者用 Nginx 反代。这跟 js 没关系，改代码改不出来。

二，HTTPS 混合内容。你的站点是 https://，m3u8 地址是 http://，Chrome 会直接拦掉，Console 里会写 Mixed Content。解决办法是给资源站也配 HTTPS，或者在自己的 Nginx 里做一层反代。

三，分片路径不对。m3u8 文件里每一行是 ts 分片地址，如果写的是相对路径而实际不在同目录，就会连续报错。直接地址栏打开 m3u8 看一眼内容就能判断。

第六步：改完必做的验证动作

这一步确认修改真的生效。按顺序做三件事：后台清缓存 → 浏览器 Ctrl + F5 → F12 打开 Network，重新加载播放页，看三个请求：CMShls.js 是 200、.m3u8 是 200、后续 .ts 是 200 且不断往下走。三个都绿，视频就出来了。

注意：如果你用了 CDN，js 文件缓存时间可能设得很长。宝塔 CDN 或云厂商控制台里找到「刷新缓存」，把 CMShls.js 的 URL 提交刷新，否则你本地看是新版，别人看还是旧版。

小结

• CMShls.js 是模板自带的播放桥接脚本，核心就是 new Hls() → loadSource() → attachMedia() 三步。
• 先确认 200 还是 404，再动手改代码，别一上来就重写文件。
• 引入顺序：hls.min.js 必须在 CMShls.js 前面，否则报 Hls is not defined。
• 播放地址要用 data-url 动态传，别在 js 里写死。
• 播不出来的大头是 403 跨域和 HTTPS 混合内容，不是 js 语法问题。
• 每次改完记得清赞片CMS缓存 + 强刷浏览器 + 刷 CDN。