一、缘起：被忽视的”白屏三秒”

做影视站的兄弟都知道，用户点”播放”那一刻，体验才是最脆弱的。

后端要查资源站、要解析 m3u8、要拉到 CDN、要初始化播放器……这中间哪怕只卡 2 秒，用户的手指就已经在”换线路”按钮上了。更糟的是这 2 秒里屏幕上只有一片空白，或者一个丑得令人发指的转圈圈。

苹果cms系统提供了预加载能力，但是没有默认预加载页，需要自己补充。

二、效果预览

三、苹果 cms 后台配置

入口路径： 系统 → 资源/链接与播放 → 播放器参数配置 → 预加载提示

四、视觉设计：跟着品牌走

视觉调性是：深色背景 + 蓝色品牌色 + 现代感。

最终版（成品）的视觉层次：

┌─────────────────────────────────────────┐
│ [毛玻璃模糊的海报背景] │
│ │
│ ┌─────┐ ● 正在准备播放源 │
│ │海报 │ │
│ │ │ 庆余年第二季 │
│ │ │ [线路：腾讯视频] │
│ └─────┘ ─────── 进度条 │
│ │
│ 如长时间未播放，请尝试切换线路 │
└─────────────────────────────────────────┘

几个有意思的设计点：

1. 背景用海报图做高斯模糊

这是 Netflix、Disney+ 都在用的套路。把当前影片海报拉过来，blur 40px + 降亮度，铺满整个背景。比纯色背景高级太多了，而且每部影片的背景都不一样。

2. 中间是毛玻璃卡片

Safari 全家桶都支持，Chrome 76+ 也支持，效果非常惊艳。要给老浏览器 fallback 的话，就让它变成半透明黑底，也还能看。

3. 三层结构：fallback / 背景图 / 蒙版

海报加载失败？没事，有兜底渐变。海报加载慢？没事，先显示渐变，0.5s 渐入。

4. 数据兜底：JS 才是真正的重头戏

这是整个方案里最难、最坑、最体现功力的部分。

支持的模板变量（这套系统是猜的，实际以你版本为准）：

变量	含义
{$vod_name}	影片名
{$vod_pic}	海报图 URL
{$vod_year}	年份
{$vod_area}	地区
{$player_info.from}	资源站标识
{$player_info.show}	线路名

但实战中我们发现：很多场景下这些变量根本不传。比如 iframe 加载、CDN 加速、外部资源站对接。所以光靠模板变量是不够的，必须 JS 自己去找数据。

五、完整代码

源码约 130 行，结构分三块：

• <style> ：所有 CSS（约 70 行）
• <div class="yunbo-loading"> ：DOM 结构（约 15 行）
• <script> ：数据兜底逻辑（约 50 行）

直接复制就能用，不依赖任何外部资源。