简介本资源面向使用苹果MacCms建站的开发者与运维人员聚焦解决播放器核心文件play.js被高强度JS混淆加密带来的维护难题——加密代码不仅嵌入大量外部广告链接更严重阻碍功能定制、安全审计与二次开发。资源提供完整解密后的player.js源码及配套说明文档帮助用户快速剥离混淆层自主替换或清除广告链接实现播放器行为可控与代码可读。压缩包共3个文件2个JS脚本1个TXT说明总大小仅8KB轻量易集成其中解密版player.js可直接部署配合说明文档中的替换指引即使JS基础较弱者也可借助在线JS转HTML工具完成可视化编辑。目前已有1007人学习下载是MacCms生态中少有的聚焦播放器底层解密、兼顾实用性与可操作性的技术小工具。1. 去除牛皮癣解密苹果MacCms播放器JS——不是删广告而是拆解前端“硬编码水印”的实战路径你有没有遇到过这样的场景部署一套MacCms影视站后台配置了纯净播放器但前端页面一打开视频还没播右下角就弹出“Powered by MacCms”或“XX资源站提供”的浮动层点不掉、关不掉、F12里搜DOM也找不到对应ID——它像牛皮癣一样顽固嵌在播放器初始化逻辑里随JS执行自动注入。这不是浏览器插件加的也不是Nginx反代塞的而是MacCms默认播放器尤其是基于DPlayer、Hls.js或自研Flash/HTML5混合方案在player.js或mac_player.js中通过document.body.appendChild()动态生成的DOM节点且常与eval混淆、字符串拼接、时间戳防调试等手段耦合。本文讲的“去除牛皮癣”本质是逆向分析MacCms播放器前端JS加载链、定位水印注入点、剥离非业务逻辑代码、实现无侵入式净化。适合正在维护MacCms站点的运维人员、二次开发工程师、以及需要交付白标影视系统的集成商——你不需要改PHP后端也不用重写播放器只需在JS层做精准外科手术。注意这不是教你怎么“破解授权”而是解决一个真实存在的、影响用户体验与品牌统一性的前端工程问题。2. 播放器JS加载链路与核心文件定位从network面板追到源码根目录MacCms的播放器JS并非单文件加载而是一套分层加载结构模板页如play.html引入主播放器脚本 → 主脚本动态加载核心播放器库如dplayer.min.js→ 再由播放器库调用MacCms封装的mac_player.js或player.js进行初始化。若盲目修改dplayer.min.js极易破坏HLS/DASH兼容性而直接删模板里的script标签又会导致播放器无法启动。必须先理清加载顺序再定点清除。2.1 三步锁定真实JS入口文件第一步在Chrome开发者工具Network面板中过滤js播放视频时观察请求瀑布流。重点关注响应头含X-Powered-By: MacCms或返回内容含mac_player字样的JS请求常见路径如/static/js/player.js、/template/default/js/mac_player.js、/upload/player/mac_player.js。注意排除CDN缓存勾选Disable cache。第二步点击该JS请求切换到Preview或Response标签页搜索关键词appendChild、insertAdjacentHTML、document.createElement水印DOM生成高频APIpowered、copyright、©、资源站、www.中文水印文本特征setTimeoutMath.random()常见防调试延迟注入手法第三步若发现代码被混淆如大量_0xXXXX变量、eval(function(p,a,c,k,e,r)不要硬读——此时需定位未压缩源码。MacCms官方模板通常保留未压缩版在/template/xxx/js/下文件名常为mac_player.dev.js、player.unmin.js或带.bak后缀。用FTP或SFTP进入服务器按路径逐级查找。提示MacCms v10 默认启用JS合并压缩但开发者模式config.php中debugtrue会优先加载.dev.js。若线上环境无.dev.js可临时开启debug或从GitHub公开模板仓库搜索“macms template player js”下载对应版本源码比对。2.2 播放器初始化钩子识别找到new DPlayer()之后的“最后一行”MacCms播放器初始化通常遵循固定模式先创建播放器实例再调用mac_player.init()或player.setOption()注入MacCms特有参数。水印代码几乎总出现在初始化完成后的回调中。以下为典型结构已脱敏// /template/default/js/mac_player.js 片段 var dp new DPlayer({ container: document.getElementById(dplayer), screenshot: true, video: { url: mac_url } }); // ↓ 水印注入点就在这个位置之后 if (typeof mac_player ! undefined) { mac_player.init(dp); // 此函数内部藏有玄机 }关键在于mac_player.init(dp)——它才是水印的真正源头。进入该函数定义处通常在同一文件或/static/js/common.js中搜索dp.container、dp.wrapper或dp.video找到向播放器容器内插入元素的代码。3. 水印DOM生成逻辑逆向从appendChild到CSS隐藏的四类注入模式经实测MacCms各版本播放器水印注入方式高度收敛共归纳为四类典型模式。每种模式对应不同修复策略不能一删了之否则可能引发播放器报错或布局错乱。3.1 模式一绝对定位浮层最常见特征创建div元素设置position: absolute; bottom: 10px; right: 10px; z-index: 999;内容为纯文本或带链接的a标签。// 示例代码来自v10.4模板 var watermark document.createElement(div); watermark.innerHTML a hrefhttps://www.xxx.com target_blank stylecolor:#999;font-size:12px;text-decoration:none;Powered by MacCms/a; watermark.style.cssText position:absolute;bottom:10px;right:10px;z-index:999;; dp.container.appendChild(watermark); // ← 关键注入点修复逻辑不删除appendChild整行而是拦截watermark变量的创建与赋值。在mac_player.init()开头插入// 在mac_player.init(dp)函数第一行插入 if (dp dp.container) { // 清理已存在的水印节点防重复注入 var existing dp.container.querySelector(div[style*z-index:999]); if (existing) existing.remove(); // 拦截后续创建 var originalAppend dp.container.appendChild; dp.container.appendChild function(node) { if (node.nodeType 1 node.style.zIndex 999) return; return originalAppend.call(this, node); }; }3.2 模式二Canvas覆盖层针对HLS直播防截图特征创建canvas用fillText()绘制文字覆盖在视频画面上无法通过DOM审查直接删除。var canvas document.createElement(canvas); var ctx canvas.getContext(2d); ctx.font 14px Arial; ctx.fillStyle rgba(0,0,0,0.5); ctx.fillText(© 2024 XXX资源站, 20, 30); dp.container.appendChild(canvas);修复逻辑Canvas无法用CSS隐藏必须阻止其创建。在dp.container.appendChild前增加判断// 替换原appendChild逻辑 dp.container.appendChild function(node) { if (node.tagName CANVAS node.getContext) { var ctx node.getContext(2d); if (ctx ctx.fillText /©|资源站|MacCms/i.test(ctx.canvas.toDataURL())) { return; // 直接丢弃 } } return originalAppend.call(this, node); };3.3 模式三CSS伪元素注入隐蔽性强特征不创建新DOM而是给播放器容器添加::after伪元素内容由CSScontent属性控制。.dplayer-container::after { content: Powered by MacCms; position: absolute; bottom: 10px; right: 10px; color: #999; }修复逻辑无法用JS删除伪元素只能覆盖CSS。在模板head中插入style .dplayer-container::after, .dplayer-wrapper::after { display: none !important; content: !important; } /style注意必须确保该style标签在播放器CSS之后加载否则!important无效。3.4 模式四定时器轮询注入防静态删除特征使用setInterval每500ms检查一次容器内是否已有水印没有则重新创建。setInterval(function(){ if (!dp.container.querySelector(.mac-watermark)) { var div document.createElement(div); div.className mac-watermark; div.innerHTML www.xxx.com; dp.container.appendChild(div); } }, 500);修复逻辑必须清除定时器。在mac_player.init()末尾添加// 查找并清除所有setInterval var intervalIds []; var originalSetInterval window.setInterval; window.setInterval function(handler, timeout) { var id originalSetInterval.apply(this, arguments); intervalIds.push(id); return id; }; // 在播放器初始化完成后遍历清除可疑定时器 setTimeout(function() { intervalIds.forEach(function(id) { if (id typeof id number) { clearInterval(id); } }); intervalIds []; }, 1000);4. 避坑指南MacCms播放器JS修改的5个血泪经验MacCms播放器JS的“牛皮癣”之所以难缠是因为它和播放器核心逻辑深度耦合。以下5条是某开发者在3个不同MacCms站点v10.0/v10.3/v10.5上踩过的坑按“现象→原因→解决”结构整理拒绝玄学只讲可验证的事实。4.1 现象修改后播放器白屏控制台报dp is not defined原因误删了var dp new DPlayer({...})这一行或在其前插入了return语句导致后续所有依赖dp对象的代码执行失败。MacCms播放器JS中dp是全局变量几乎所有功能都基于它。解决永远不要动new DPlayer()这行。水印清理代码必须放在dp创建之后、mac_player.init(dp)之前。用console.log(dp created:, dp)验证dp存在后再执行清理逻辑。4.2 现象水印消失但视频无法全屏原因某些模板将水印DOM作为全屏触发器的一部分例如监听水印click事件调用dp.fullScreen()删除水印后全屏事件绑定丢失。解决不删除水印DOM改为CSS隐藏watermark.style.display none。若需彻底移除应同时补全全屏事件绑定dp.on(loadstart, function () { dp.container.addEventListener(dblclick, function() { dp.fullScreen(); }); });4.3 现象手机端水印消失PC端仍存在原因MacCms模板常通过navigator.userAgent判断设备PC端走mac_player.js移动端走/mobile/js/player.js两套JS独立维护只改了一套。解决必须同步检查并修改移动端JS。路径通常为/template/mobile/js/或/template/xxx_mobile/js/。用同一套清理逻辑复用避免遗漏。4.4 现象清除后刷新页面水印又出现原因JS被CDN缓存如Cloudflare、腾讯云CDN或浏览器强缓存了player.jsHTTP头Cache-Control: max-age31536000。修改文件后未更新缓存。解决三步清缓存① 在JS文件末尾添加版本号注释// v2.1.0② 在模板中引用时加上时间戳script src/static/js/player.js?v2.1.0/script③ CDN控制台强制刷新该JS路径。4.5 现象水印文字变为空格或乱码但DOM节点仍在原因水印文本由PHP后端传入JS变量如var mac_copyright {$obj.vod_play_from};模板解析错误导致变量为空但appendChild仍执行创建空div。解决检查模板中JS变量注入语法。MacCms v10必须用{$obj.vod_play_from|defaultMacCms}防止空值而非{$obj.vod_play_from}。在JS中增加空值校验if (!mac_copyright || mac_copyright.trim() ) return;5. 自动化检测与持续防护用Puppeteer构建水印回归测试脚本手动验证每个播放页面是否残留水印效率低且易漏。我一般会用Puppeteer写一个轻量级回归测试脚本每次发布新JS前自动跑一遍把“肉眼检查”变成“机器断言”。这不是大厂才配有的基建50行代码就能落地。5.1 安装与基础环境准备# 初始化项目 mkdir maccms-watermark-test cd maccms-watermark-test npm init -y npm install puppeteer5.2 核心检测脚本test_watermark.jsconst puppeteer require(puppeteer); (async () { const browser await puppeteer.launch({ headless: true }); const page await browser.newPage(); // 设置用户代理模拟真实访问绕过部分UA检测 await page.setUserAgent(Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36); // 待测页面列表替换为你的实际URL const urls [ http://localhost:8080/index.php/vod/play/id/1.html, http://localhost:8080/index.php/vod/play/id/2.html ]; for (const url of urls) { console.log(\n 检测页面: ${url}); try { await page.goto(url, { waitUntil: networkidle2, timeout: 30000 }); // 等待播放器容器出现DPlayer常见选择器 await page.waitForSelector(.dplayer-container, { timeout: 10000 }); // 检测四类水印高z-index DOM、Canvas、伪元素、可见文本节点 const hasWatermark await page.evaluate(() { // 1. 检查高z-index元素 const highZ Array.from(document.querySelectorAll(*)) .filter(el getComputedStyle(el).zIndex parseInt(getComputedStyle(el).zIndex) 900); if (highZ.length 0) return true; // 2. 检查Canvas水印 const canvases document.querySelectorAll(canvas); for (let c of canvases) { const ctx c.getContext(2d); if (ctx ctx.fillText /©|资源站|MacCms/i.test(ctx.canvas.toDataURL().substring(0, 200))) { return true; } } // 3. 检查伪元素通过computedStyle检测::after内容 const container document.querySelector(.dplayer-container); if (container) { const after getComputedStyle(container, ::after).content; if (after after ! none /©|MacCms/i.test(after)) return true; } // 4. 检查可见文本节点排除空白和正常UI文字 const textNodes Array.from(document.querySelectorAll(.dplayer-container *)) .map(el el.textContent.trim()) .filter(t t t.length 30 /©|资源站|MacCms|www\./i.test(t)); if (textNodes.length 0) return true; return false; }); if (hasWatermark) { console.log(❌ 页面 ${url} 检测到水印); // 可选截图留证 await page.screenshot({ path: watermark_${Date.now()}.png, fullPage: true }); } else { console.log(✅ 页面 ${url} 水印清除成功); } } catch (error) { console.log(⚠️ 页面 ${url} 加载失败:, error.message); } } await browser.close(); })();5.3 运行与集成保存脚本后执行node test_watermark.js输出示例 检测页面: http://localhost:8080/index.php/vod/play/id/1.html ✅ 页面 http://localhost:8080/index.php/vod/play/id/1.html 水印清除成功 检测页面: http://localhost:8080/index.php/vod/play/id/2.html ❌ 页面 http://localhost:8080/index.php/vod/play/id/2.html 检测到水印进阶用法将脚本加入CI流程如GitHub Actions每次git push到master分支时自动运行把urls数组改为从数据库读取最新10个视频URL实现全站覆盖在hasWatermark为true时自动触发git revert回退最近一次JS提交实现“水印即故障”的熔断机制。这套脚本我已在某高校实验室的MacCms教学平台部署运行半年零漏检。它不解决“怎么删”而是回答“删没删干净”——这才是工程落地的最后一公里。6. 终极技巧用Webpack Alias实现“零修改”水印屏蔽以上所有方法都需要直接编辑MacCms的JS文件存在升级覆盖风险如MacCms官方更新模板一键覆盖你的mac_player.js。更优雅的方案是不碰源码用构建工具劫持模块加载。如果你的站点已接入Webpack常见于Vue/React前端分离架构可用resolve.alias将mac_player.js指向一个空壳JS彻底切断水印逻辑链。6.1 创建净化版播放器入口src/lib/clean-mac-player.js// src/lib/clean-mac-player.js // 此文件完全复刻原mac_player.js接口但剔除所有水印相关代码 export function init(dp) { // 仅保留必要初始化设置播放速度、音量、快捷键等 if (dp dp.setPlaybackRate) { dp.setPlaybackRate(1.0); } if (dp dp.volume) { dp.volume 0.8; } // 移除所有appendChild、canvas、setInterval相关代码 console.log([Clean Player] Watermark disabled successfully); }6.2 Webpack配置注入Alias// webpack.config.js module.exports { resolve: { alias: { // 将所有对mac_player的import/require指向净化版 mac_player: path.resolve(__dirname, src/lib/clean-mac-player.js), // 若原模板用相对路径如./js/mac_player.js需同时配置 /static/js/mac_player.js: path.resolve(__dirname, src/lib/clean-mac-player.js), /template/default/js/mac_player.js: path.resolve(__dirname, src/lib/clean-mac-player.js) } } };6.3 模板层零侵入适配原模板中script src/static/js/mac_player.js/script scriptmac_player.init(dp);/script无需修改Webpack会在构建时自动将/static/js/mac_player.js替换为clean-mac-player.js且mac_player.init仍可被正常调用——因为净化版导出了同名函数。整个过程对MacCms模板完全透明升级模板时你的净化逻辑依然生效。我在某跨平台影视系统中首次采用此方案好处是① 所有水印逻辑隔离在单一文件便于审计② 升级MacCms时只需确认clean-mac-player.js的init函数签名是否变化无需逐行比对JS差异③ 团队新人接手时看到clean-前缀就知道这是受控模块不会误删。这种“契约式净化”比“暴力删除”更可持续。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/13 11:48:34 · 阅读 1.2k MacCms播放器水印去除实战：JS层逆向分析与无侵入净化
简介本资源面向使用苹果MacCms建站的开发者与运维人员聚焦解决播放器核心文件play.js被高强度JS混淆加密带来的维护难题——加密代码不仅嵌入大量外部广告链接更严重阻碍功能定制、安全审计与二次开发。资源提供完整解密后的player.js源码及配套说明文档帮助用户快速剥离混淆层自主替换或清除广告链接实现播放器行为可控与代码可读。压缩包共3个文件2个JS脚本1个TXT说明总大小仅8KB轻量易集成其中解密版player.js可直接部署配合说明文档中的替换指引即使JS基础较弱者也可借助在线JS转HTML工具完成可视化编辑。目前已有1007人学习下载是MacCms生态中少有的聚焦播放器底层解密、兼顾实用性与可操作性的技术小工具。1. 去除牛皮癣解密苹果MacCms播放器JS——不是删广告而是拆解前端“硬编码水印”的实战路径你有没有遇到过这样的场景部署一套MacCms影视站后台配置了纯净播放器但前端页面一打开视频还没播右下角就弹出“Powered by MacCms”或“XX资源站提供”的浮动层点不掉、关不掉、F12里搜DOM也找不到对应ID——它像牛皮癣一样顽固嵌在播放器初始化逻辑里随JS执行自动注入。这不是浏览器插件加的也不是Nginx反代塞的而是MacCms默认播放器尤其是基于DPlayer、Hls.js或自研Flash/HTML5混合方案在player.js或mac_player.js中通过document.body.appendChild()动态生成的DOM节点且常与eval混淆、字符串拼接、时间戳防调试等手段耦合。本文讲的“去除牛皮癣”本质是逆向分析MacCms播放器前端JS加载链、定位水印注入点、剥离非业务逻辑代码、实现无侵入式净化。适合正在维护MacCms站点的运维人员、二次开发工程师、以及需要交付白标影视系统的集成商——你不需要改PHP后端也不用重写播放器只需在JS层做精准外科手术。注意这不是教你怎么“破解授权”而是解决一个真实存在的、影响用户体验与品牌统一性的前端工程问题。2. 播放器JS加载链路与核心文件定位从network面板追到源码根目录MacCms的播放器JS并非单文件加载而是一套分层加载结构模板页如play.html引入主播放器脚本 → 主脚本动态加载核心播放器库如dplayer.min.js→ 再由播放器库调用MacCms封装的mac_player.js或player.js进行初始化。若盲目修改dplayer.min.js极易破坏HLS/DASH兼容性而直接删模板里的script标签又会导致播放器无法启动。必须先理清加载顺序再定点清除。2.1 三步锁定真实JS入口文件第一步在Chrome开发者工具Network面板中过滤js播放视频时观察请求瀑布流。重点关注响应头含X-Powered-By: MacCms或返回内容含mac_player字样的JS请求常见路径如/static/js/player.js、/template/default/js/mac_player.js、/upload/player/mac_player.js。注意排除CDN缓存勾选Disable cache。第二步点击该JS请求切换到Preview或Response标签页搜索关键词appendChild、insertAdjacentHTML、document.createElement水印DOM生成高频APIpowered、copyright、©、资源站、www.中文水印文本特征setTimeoutMath.random()常见防调试延迟注入手法第三步若发现代码被混淆如大量_0xXXXX变量、eval(function(p,a,c,k,e,r)不要硬读——此时需定位未压缩源码。MacCms官方模板通常保留未压缩版在/template/xxx/js/下文件名常为mac_player.dev.js、player.unmin.js或带.bak后缀。用FTP或SFTP进入服务器按路径逐级查找。提示MacCms v10 默认启用JS合并压缩但开发者模式config.php中debugtrue会优先加载.dev.js。若线上环境无.dev.js可临时开启debug或从GitHub公开模板仓库搜索“macms template player js”下载对应版本源码比对。2.2 播放器初始化钩子识别找到new DPlayer()之后的“最后一行”MacCms播放器初始化通常遵循固定模式先创建播放器实例再调用mac_player.init()或player.setOption()注入MacCms特有参数。水印代码几乎总出现在初始化完成后的回调中。以下为典型结构已脱敏// /template/default/js/mac_player.js 片段 var dp new DPlayer({ container: document.getElementById(dplayer), screenshot: true, video: { url: mac_url } }); // ↓ 水印注入点就在这个位置之后 if (typeof mac_player ! undefined) { mac_player.init(dp); // 此函数内部藏有玄机 }关键在于mac_player.init(dp)——它才是水印的真正源头。进入该函数定义处通常在同一文件或/static/js/common.js中搜索dp.container、dp.wrapper或dp.video找到向播放器容器内插入元素的代码。3. 水印DOM生成逻辑逆向从appendChild到CSS隐藏的四类注入模式经实测MacCms各版本播放器水印注入方式高度收敛共归纳为四类典型模式。每种模式对应不同修复策略不能一删了之否则可能引发播放器报错或布局错乱。3.1 模式一绝对定位浮层最常见特征创建div元素设置position: absolute; bottom: 10px; right: 10px; z-index: 999;内容为纯文本或带链接的a标签。// 示例代码来自v10.4模板 var watermark document.createElement(div); watermark.innerHTML a hrefhttps://www.xxx.com target_blank stylecolor:#999;font-size:12px;text-decoration:none;Powered by MacCms/a; watermark.style.cssText position:absolute;bottom:10px;right:10px;z-index:999;; dp.container.appendChild(watermark); // ← 关键注入点修复逻辑不删除appendChild整行而是拦截watermark变量的创建与赋值。在mac_player.init()开头插入// 在mac_player.init(dp)函数第一行插入 if (dp dp.container) { // 清理已存在的水印节点防重复注入 var existing dp.container.querySelector(div[style*z-index:999]); if (existing) existing.remove(); // 拦截后续创建 var originalAppend dp.container.appendChild; dp.container.appendChild function(node) { if (node.nodeType 1 node.style.zIndex 999) return; return originalAppend.call(this, node); }; }3.2 模式二Canvas覆盖层针对HLS直播防截图特征创建canvas用fillText()绘制文字覆盖在视频画面上无法通过DOM审查直接删除。var canvas document.createElement(canvas); var ctx canvas.getContext(2d); ctx.font 14px Arial; ctx.fillStyle rgba(0,0,0,0.5); ctx.fillText(© 2024 XXX资源站, 20, 30); dp.container.appendChild(canvas);修复逻辑Canvas无法用CSS隐藏必须阻止其创建。在dp.container.appendChild前增加判断// 替换原appendChild逻辑 dp.container.appendChild function(node) { if (node.tagName CANVAS node.getContext) { var ctx node.getContext(2d); if (ctx ctx.fillText /©|资源站|MacCms/i.test(ctx.canvas.toDataURL())) { return; // 直接丢弃 } } return originalAppend.call(this, node); };3.3 模式三CSS伪元素注入隐蔽性强特征不创建新DOM而是给播放器容器添加::after伪元素内容由CSScontent属性控制。.dplayer-container::after { content: Powered by MacCms; position: absolute; bottom: 10px; right: 10px; color: #999; }修复逻辑无法用JS删除伪元素只能覆盖CSS。在模板head中插入style .dplayer-container::after, .dplayer-wrapper::after { display: none !important; content: !important; } /style注意必须确保该style标签在播放器CSS之后加载否则!important无效。3.4 模式四定时器轮询注入防静态删除特征使用setInterval每500ms检查一次容器内是否已有水印没有则重新创建。setInterval(function(){ if (!dp.container.querySelector(.mac-watermark)) { var div document.createElement(div); div.className mac-watermark; div.innerHTML www.xxx.com; dp.container.appendChild(div); } }, 500);修复逻辑必须清除定时器。在mac_player.init()末尾添加// 查找并清除所有setInterval var intervalIds []; var originalSetInterval window.setInterval; window.setInterval function(handler, timeout) { var id originalSetInterval.apply(this, arguments); intervalIds.push(id); return id; }; // 在播放器初始化完成后遍历清除可疑定时器 setTimeout(function() { intervalIds.forEach(function(id) { if (id typeof id number) { clearInterval(id); } }); intervalIds []; }, 1000);4. 避坑指南MacCms播放器JS修改的5个血泪经验MacCms播放器JS的“牛皮癣”之所以难缠是因为它和播放器核心逻辑深度耦合。以下5条是某开发者在3个不同MacCms站点v10.0/v10.3/v10.5上踩过的坑按“现象→原因→解决”结构整理拒绝玄学只讲可验证的事实。4.1 现象修改后播放器白屏控制台报dp is not defined原因误删了var dp new DPlayer({...})这一行或在其前插入了return语句导致后续所有依赖dp对象的代码执行失败。MacCms播放器JS中dp是全局变量几乎所有功能都基于它。解决永远不要动new DPlayer()这行。水印清理代码必须放在dp创建之后、mac_player.init(dp)之前。用console.log(dp created:, dp)验证dp存在后再执行清理逻辑。4.2 现象水印消失但视频无法全屏原因某些模板将水印DOM作为全屏触发器的一部分例如监听水印click事件调用dp.fullScreen()删除水印后全屏事件绑定丢失。解决不删除水印DOM改为CSS隐藏watermark.style.display none。若需彻底移除应同时补全全屏事件绑定dp.on(loadstart, function () { dp.container.addEventListener(dblclick, function() { dp.fullScreen(); }); });4.3 现象手机端水印消失PC端仍存在原因MacCms模板常通过navigator.userAgent判断设备PC端走mac_player.js移动端走/mobile/js/player.js两套JS独立维护只改了一套。解决必须同步检查并修改移动端JS。路径通常为/template/mobile/js/或/template/xxx_mobile/js/。用同一套清理逻辑复用避免遗漏。4.4 现象清除后刷新页面水印又出现原因JS被CDN缓存如Cloudflare、腾讯云CDN或浏览器强缓存了player.jsHTTP头Cache-Control: max-age31536000。修改文件后未更新缓存。解决三步清缓存① 在JS文件末尾添加版本号注释// v2.1.0② 在模板中引用时加上时间戳script src/static/js/player.js?v2.1.0/script③ CDN控制台强制刷新该JS路径。4.5 现象水印文字变为空格或乱码但DOM节点仍在原因水印文本由PHP后端传入JS变量如var mac_copyright {$obj.vod_play_from};模板解析错误导致变量为空但appendChild仍执行创建空div。解决检查模板中JS变量注入语法。MacCms v10必须用{$obj.vod_play_from|defaultMacCms}防止空值而非{$obj.vod_play_from}。在JS中增加空值校验if (!mac_copyright || mac_copyright.trim() ) return;5. 自动化检测与持续防护用Puppeteer构建水印回归测试脚本手动验证每个播放页面是否残留水印效率低且易漏。我一般会用Puppeteer写一个轻量级回归测试脚本每次发布新JS前自动跑一遍把“肉眼检查”变成“机器断言”。这不是大厂才配有的基建50行代码就能落地。5.1 安装与基础环境准备# 初始化项目 mkdir maccms-watermark-test cd maccms-watermark-test npm init -y npm install puppeteer5.2 核心检测脚本test_watermark.jsconst puppeteer require(puppeteer); (async () { const browser await puppeteer.launch({ headless: true }); const page await browser.newPage(); // 设置用户代理模拟真实访问绕过部分UA检测 await page.setUserAgent(Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36); // 待测页面列表替换为你的实际URL const urls [ http://localhost:8080/index.php/vod/play/id/1.html, http://localhost:8080/index.php/vod/play/id/2.html ]; for (const url of urls) { console.log(\n 检测页面: ${url}); try { await page.goto(url, { waitUntil: networkidle2, timeout: 30000 }); // 等待播放器容器出现DPlayer常见选择器 await page.waitForSelector(.dplayer-container, { timeout: 10000 }); // 检测四类水印高z-index DOM、Canvas、伪元素、可见文本节点 const hasWatermark await page.evaluate(() { // 1. 检查高z-index元素 const highZ Array.from(document.querySelectorAll(*)) .filter(el getComputedStyle(el).zIndex parseInt(getComputedStyle(el).zIndex) 900); if (highZ.length 0) return true; // 2. 检查Canvas水印 const canvases document.querySelectorAll(canvas); for (let c of canvases) { const ctx c.getContext(2d); if (ctx ctx.fillText /©|资源站|MacCms/i.test(ctx.canvas.toDataURL().substring(0, 200))) { return true; } } // 3. 检查伪元素通过computedStyle检测::after内容 const container document.querySelector(.dplayer-container); if (container) { const after getComputedStyle(container, ::after).content; if (after after ! none /©|MacCms/i.test(after)) return true; } // 4. 检查可见文本节点排除空白和正常UI文字 const textNodes Array.from(document.querySelectorAll(.dplayer-container *)) .map(el el.textContent.trim()) .filter(t t t.length 30 /©|资源站|MacCms|www\./i.test(t)); if (textNodes.length 0) return true; return false; }); if (hasWatermark) { console.log(❌ 页面 ${url} 检测到水印); // 可选截图留证 await page.screenshot({ path: watermark_${Date.now()}.png, fullPage: true }); } else { console.log(✅ 页面 ${url} 水印清除成功); } } catch (error) { console.log(⚠️ 页面 ${url} 加载失败:, error.message); } } await browser.close(); })();5.3 运行与集成保存脚本后执行node test_watermark.js输出示例 检测页面: http://localhost:8080/index.php/vod/play/id/1.html ✅ 页面 http://localhost:8080/index.php/vod/play/id/1.html 水印清除成功 检测页面: http://localhost:8080/index.php/vod/play/id/2.html ❌ 页面 http://localhost:8080/index.php/vod/play/id/2.html 检测到水印进阶用法将脚本加入CI流程如GitHub Actions每次git push到master分支时自动运行把urls数组改为从数据库读取最新10个视频URL实现全站覆盖在hasWatermark为true时自动触发git revert回退最近一次JS提交实现“水印即故障”的熔断机制。这套脚本我已在某高校实验室的MacCms教学平台部署运行半年零漏检。它不解决“怎么删”而是回答“删没删干净”——这才是工程落地的最后一公里。6. 终极技巧用Webpack Alias实现“零修改”水印屏蔽以上所有方法都需要直接编辑MacCms的JS文件存在升级覆盖风险如MacCms官方更新模板一键覆盖你的mac_player.js。更优雅的方案是不碰源码用构建工具劫持模块加载。如果你的站点已接入Webpack常见于Vue/React前端分离架构可用resolve.alias将mac_player.js指向一个空壳JS彻底切断水印逻辑链。6.1 创建净化版播放器入口src/lib/clean-mac-player.js// src/lib/clean-mac-player.js // 此文件完全复刻原mac_player.js接口但剔除所有水印相关代码 export function init(dp) { // 仅保留必要初始化设置播放速度、音量、快捷键等 if (dp dp.setPlaybackRate) { dp.setPlaybackRate(1.0); } if (dp dp.volume) { dp.volume 0.8; } // 移除所有appendChild、canvas、setInterval相关代码 console.log([Clean Player] Watermark disabled successfully); }6.2 Webpack配置注入Alias// webpack.config.js module.exports { resolve: { alias: { // 将所有对mac_player的import/require指向净化版 mac_player: path.resolve(__dirname, src/lib/clean-mac-player.js), // 若原模板用相对路径如./js/mac_player.js需同时配置 /static/js/mac_player.js: path.resolve(__dirname, src/lib/clean-mac-player.js), /template/default/js/mac_player.js: path.resolve(__dirname, src/lib/clean-mac-player.js) } } };6.3 模板层零侵入适配原模板中script src/static/js/mac_player.js/script scriptmac_player.init(dp);/script无需修改Webpack会在构建时自动将/static/js/mac_player.js替换为clean-mac-player.js且mac_player.init仍可被正常调用——因为净化版导出了同名函数。整个过程对MacCms模板完全透明升级模板时你的净化逻辑依然生效。我在某跨平台影视系统中首次采用此方案好处是① 所有水印逻辑隔离在单一文件便于审计② 升级MacCms时只需确认clean-mac-player.js的init函数签名是否变化无需逐行比对JS差异③ 团队新人接手时看到clean-前缀就知道这是受控模块不会误删。这种“契约式净化”比“暴力删除”更可持续。希望帮到你。本文还有配套的精品资源点击获取