文章页嵌了 5 个视频,preload 全是 auto,后台统计一个月多出 80GB 流量,实际播放次数只有 300 次。乍看像缓存或者权限的锅,追下去往往不是。
<video preload='metadata' poster='cover.jpg' controls> <source src='clip.mp4' type='video/mp4'> </video>
追下去是这么回事:preload=auto 会让浏览器提前下载整个文件,嵌多个视频等于一次拉几百兆。列表页用户多数不点播放,下载的流量全白费。
「preload 流量」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
具体做法是,列表页统一改 preload=metadata 只取首帧和时长;点播放时再设置 src 触发加载;补 poster 保证没加载时也有画面。
验收就看一点,列表页加载后 Network 里只有几 KB 的元数据请求,点播放才开始下视频本体。
