一、想解决的问题

腾讯视频、爱奇艺那种首页，第一眼就是大图轮播，鼠标悬停或自动切换时会有一小段预告片在背景里”无声”地播。海报图 + 短视频背景这种组合，比纯静态轮播更抓眼球，留人时间更长。

苹果CMS 原生的幻灯片模块只有图片轮播，没有视频层。参考了 N 把刀的整体思路，又根据自己的需求做了两轮迭代，最终实现：

✅ 新访客：半屏弹窗播放最新一条有幕后视频的影片；6 秒未播放成功或滚动即缩到右下角小窗
✅ 老访客：不弹窗；幻灯片每张先显示海报 5 秒，无声播放背景视频 30 秒，自动切下一张
✅ 多视频扩展：使用苹果cms幕后视频字段，作为幻灯片背景视频，每条幻灯片视频绑定独立的 m3u8
✅ 仅桌面端：移动端直接跳过所有视频逻辑，回到纯图片轮播
✅ 后台加了两个开关，可以一键关闭，也可以指定自定义 URL 覆盖默认逻辑。

二、效果预览

三、关键设计取舍

3.1 字段：用现成的 vod_behind，不要新增

• 苹果CMS 自带的 vod_behind（幕后视频）字段可以存放播放url；多一个字段意味着后台表单多一项、清洗逻辑多一段、批量更新白名单多一条，运维成本全是浪费。

教训：能复用原生字段就别加新字段。新增字段不只是改一个 SQL，是表单、控制器、批量更新、缓存键、清理脚本全部要跟着改。

3.2 海报 3 秒 + 视频 30 秒 的节奏

为什么是这两个数字：

• 3 秒 是用户从看到图片到决定是否停留的临界点。1 秒太短（还没看清是啥就切了），5 秒太长（用户已经失去耐心开始往下滑）。
• 30 秒 是预告片的甜区。预告片一般 30-90 秒；30 秒之后用户要么进详情页，要么划走，没有继续播的意义。而且 30 秒正好压住 hls.js 一个完整分段，缓冲不容易爆。

3.3 从第 3 分钟开始播

预告片前 3 分钟通常是片头 logo + 制作公司名单，对用户没价值。直接 seek 到第 3 分钟（180 秒），省流量也省时间。前提是 duration > 180 才 seek，否则短片直接从头放。

3.4 移动端完全跳过

移动端只切换海报图，硬塞背景视频只会费流量、发热、还经常被浏览器策略 block。

3.5 切 tab 暂停 + 销毁 hls

用户切到别的标签页时，如果不销毁 hls 实例，它会在后台继续拉分段，浪费带宽和 CDN 流量。回到 tab 时也不自动恢复播放（避免打扰用户），只重启”3 秒后切下一张”的定时器。

四、文件清单

最终文件改动只有 4 处：

文件	作用
template/ds3/name/diy/module/slide-g_*.html	幻灯片主模板，轮播 + 背景视频 + 新访客弹窗
template/ds3/name/public/include.html	第 61 行新增 bgvideo.css 引入（仅首页）
static/ds3/add/bgvideo.css	背景视频层、弹窗遮罩、小窗样式（共 93 行）
application/admin/view/ds3/web.html	自定义功能配置区新增”首屏弹窗”开关 + 自定义 URL

五、核心代码

本文仅用于技术学习与个人站点优化参考，请勿用于商业用途。