海洋 CMS 播放页模板怎么自定义样式

改海洋 CMS 播放页样式，本质上是三件事：找到播放页模板文件（默认叫 play.html）、用自定义 CSS 覆盖原有规则、改完在后台清一次缓存。**结论：不要直接改官方默认模板，先把它整目录复制成一个子模板再动手，否则系统升级时你的改动会被覆盖。**

播放页模板文件在哪里？

播放页的 HTML 骨架在模板目录里，文件名通常是 play.html。海洋 CMS 的模板统一放在站点根目录的 template/ 下，比如默认模板是 template/default/，对应的播放页就是 template/default/play.html（部分老版本或第三方模板可能叫 play.htm，或放在 html/ 子目录里，以你站点实际的模板目录为准）。

配套的文件一般有这几类：样式表在模板目录的 css/ 里，公共头部和底部常被拆成 head.html、foot.html 之类的片段由模板标签引入，播放器的 JS 也随模板走。改样式时优先只动 CSS，能不动 HTML 结构就不动，因为模板里的循环标签一旦删错，播放地址列表就直接不显示。

正确的改动流程是什么？

第一步，复制模板。在 FTP 或宝塔文件管理里，把 template/default/ 整目录复制成 template/mytpl/，然后进后台的站点设置/模板管理，把当前模板切换到 mytpl。这样默认模板保持原样，出问题随时切回去。

第二步，用浏览器 F12 定位。打开任意一个播放页，按 F12 选中你要改的元素，直接看它是哪个 class、哪条 CSS 生效的，把选择器和属性复制出来，再改写。

第三步，覆盖式写 CSS。不要删原有规则，改在模板 CSS 文件的末尾追加，或新建一个 custom.css 引入。覆盖时注意优先级：同权重下后写的生效；原规则带 !important 时你也得加。

第四步，后台清缓存或重新生成。海洋 CMS 有缓存机制，改完模板文件如果前台没变化，先到后台点清除/更新缓存，开了静态生成的站点还要重新生成播放页。

播放器宽度和手机端 16:9 怎么做？

很多人卡在"PC 上正常、手机上播放器被压扁"。可靠做法是给播放器容器做等比占位：

.play-box{position:relative;width:100%;padding-top:56.25%;}
.play-box iframe,.play-box video,.play-box #player{
  position:absolute;left:0;top:0;width:100%;height:100%;
}

padding-top:56.25% 就是 16:9（9÷16=0.5625），容器多高由宽度算出来，播放器绝对定位铺满，任何屏宽都不变形。现代浏览器也可以直接写 aspect-ratio:16/9，Chrome 88+、Safari 15+ 都支持，只是老设备兼容性不如 padding 方案稳。

移动端另外两处常改的：把播放页左右内边距从 20px 降到 10px，以及把播放线路的按钮从横排改成 flex-wrap:wrap 换行，避免窄屏挤压。

改播放页最容易踩哪些坑？

结论：最常见的三个坑是改错文件、忘清缓存、动了模板标签。

第一，改的是 css/ 里的公共样式，结果首页、列表页一起变了。播放页专属样式建议用播放页容器上的独立 class 做前缀，比如 .play-page .xxx，把影响范围锁死在播放页。

第二，模板里那些 {...} 形式的标签是系统输出播放地址、线路、剧集的地方，只调它们外面的 div 和 class，别改标签本身。

第三，备份。每次大改前把 play.html 和 CSS 各存一份带日期的副本，改崩了 30 秒就能还原。

总结一下：复制模板成子模板 → F12 定位 → 末尾追加覆盖式 CSS → 播放器用 padding-top 或 aspect-ratio 做等比 → 后台清缓存。整套流程不改核心标签，升级和回滚都不受影响。