赞片CMSMP4播放器
照着这篇做完,你能在赞片CMS后台新增一个专门播放 MP4 直链的播放器,让采集来的或本地上传的 mp4 文件在PC和手机端都能正常点开播放。
第一步:确认版本,找到播放器文件放哪
赞片CMS的播放器不是写死在程序里的,而是一个个独立的模板文件,放在网站根目录的播放器目录下。先做一件事:登录后台,看顶部或左下角显示的版本号;再打开 FTP 或宝塔面板的文件管理,进入网站根目录。
常见路径是 /static/player/,里面能看到 dplayer.html、ckplayer.html、qiyi.html 之类的文件,一个文件对应一种播放器。如果你用的是较老的 v2.x 分支,目录名可能是 /player/。
注意:不要凭记忆去新建目录。先在后台找到播放器列表(路径见第二步),里面每条记录都会显示对应的模板文件名,按它显示的路径去找,改错目录等于白改。
第二步:在后台新增一条播放器记录
这一步的目标是让系统"认识"这个播放器,之后录入视频时才能在播放器下拉框里选到它。
进入后台 → 左侧菜单 系统 → 播放器管理(部分版本叫 扩展 → 播放器),点右上角 添加播放器,填写四个字段:
- 播放器名称:填
MP4播放器,这是给别人看的中文名。 - 播放器标识 / 编码:填
mp4,全小写英文,这是数据表里存的值,后面采集规则要对得上。 - 模板文件:填
mp4.html(只填文件名,不填路径)。 - 排序 / 状态:排序填 10,状态选 启用。
点保存。此时列表里会出现这条记录,但前台还播不了,因为 mp4.html 这个文件还不存在。
第三步:写 mp4.html 播放器文件
这一步做完,播放器本身就能跑起来了。用文件管理进入 /static/player/,复制一份 dplayer.html 改名为 mp4.html,然后编辑它,把里面接收播放地址的变量替换成下面这段最简结构:
<div id="mp4box" style="width:100%;height:100%;"></div>
<video id="mp4video" src="{$url}" controls preload="metadata"
playsinline webkit-playsinline
style="width:100%;height:100%;background:#000;"></video>
关键点在于 {$url} 这个变量——赞片CMS在渲染播放页时,会把它替换成当前剧集的真实播放地址。同理还有 {$vod_name}(影片名)、{$vod_id}、{$playername},需要显示标题时直接写就行。
如果你想让播放器好看一点,可以把上面的 <video> 换成 DPlayer,引入 CDN 上的 dplayer.min.js 和 dplayer.min.css,然后:
var dp = new DPlayer({
container: document.getElementById('mp4box'),
video: { url: '{$url}', type: 'auto' }
});
注意:变量一定要带大括号和美元符号原样写,
{$url}写成$url或者被编辑器自动转义成{$url},前台就会拿到一串无效地址,表现是播放器黑屏、控制台报 404。
第四步:录入数据时选对播放器
现在去 视频管理 → 添加视频,在"播放列表"区域填播放地址时,注意每一集前面的 播放器 下拉框要选成刚才那个 mp4。如果你是采集入库,就去 采集 → 采集规则 里,把播放器字段映射到 mp4 这个标识上。
注意:赞片CMS的播放地址格式一般是
播放器标识$地址这种结构(不同版本分隔符可能是$或$$$),标识写错,前台就会提示"暂不支持该播放器"。
第五步:前台验证与排错
打开任意一部已录入的视频详情页,点剧集,看播放页能否加载。常见三种问题:
- 黑屏但控制台无报错:多半是 mp4 文件本身的服务器不支持 Range 请求(换阿里云OSS或七牛默认支持);也可能是 http 的 mp4 放在了 https 站点上,属于混合内容,浏览器会拦。
- 手机端不自动播放:浏览器策略限制,给
<video>加上muted属性即可,用户手动点播放不受影响。 - 改了文件前台没变化:后台 → 系统 → 更新缓存,再强刷浏览器(Ctrl+F5)。
小结
- 播放器 = 后台一条记录 +
/static/player/下一个模板文件,两者文件名必须对应。 - 标识用全小写
mp4,采集规则的映射字段要跟它一字不差。 - 模板里用
{$url}取播放地址,别手改成别的写法。 - mp4 走的是浏览器原生
<video>,不支持 m3u8 那种切片,格式别搞混。 - 改完必做两件事:清缓存、强刷。
原文链接:https://www.gj0.com/thread-433.html
转载请注明出处并保留本声明;内容仅代表作者观点,与本站立场无关。若本文涉嫌侵权,请联系本站处理。