插入视频mv 笔记：从黑屏到出声的四个小时
昨天下午三点，我在城西「回声书店」二楼靠窗的位置坐下，点了一杯冰美式，打开那台贴了三张旧贴纸的 ThinkPad。任务是给朋友阿哲的个人页插一段 MV。他发来一个网盘链接，文件名是 《东京夜行_最终版_v3》，大小 287MB，MP4 格式。我想，这能有多难。
结果真不难，难的是我太自信。
我先用最老实的方法：<video src="..." controls></video>。页面打开，播放器出来了，按钮点了，声音也出来了。我截图发给阿哲，他回了一个「牛」。然后我刷新页面，视频区域变成一块黑洞，连播放按钮都没了。我以为是网络，又刷新，还是黑。我把文件改成英文名，把路径挪到根目录，甚至在 <source> 里加了 type="video/mp4"，像给不吃香菜的人反复挑香菜。
晚上九点，阿哲打来语音，说他那边看着是好的。我让他截图，他截了，视频在画面里播得正欢。我盯着他的截图看了十秒，忽然意识到：他截的是本地文件，我发给他看的才是线上页面。也就是说，我一直在给一个没上传成功的文件做体检。
“你把文件拖进 FTP 的时候，是不是只拖了文件夹？”
——阿哲，2026 年 4 月 4 日 21:47，语音里说的。我沉默了四秒，回他：“……你怎么知道。”
重新传完，视频在线上亮了。但新的问题来了：自动播放被浏览器拦了，封面图不显示，手机端还横竖屏乱转。我翻到去年的一篇讲 xboxone日本视频 的旧笔记，里面提到 playsinline 和 muted 的组合，我照抄，iOS 上终于肯安静地动了。
你看，答案往往在别人的旧坑里。
说到坑，我顺手点开收藏夹里那篇讲 b站国产小姐姐mv 的帖子，里面的嵌入方式和我完全两套逻辑。我试着把 iframe 那套搬过来，结果页面加载慢了 1.8 秒。我掐表数的，没骗你。最后我还是回到原生 <video>，只是给封面加了一张在 Unsplash 上找的夜景图——https://images.unsplash.com/photo-1519681393784-d120267933ba，比黑屏体面多了。
凌晨一点，我泡了第二杯速溶咖啡，突然想到一个更蠢的问题：我为什么要用这么重的方式插一段 MV？阿哲的需求只是“让人一进来就能看到我拍的片子”。如果只是这样，一个带封面的跳转链接可能比自动播放更诚实。但我还是把播放器留下了，因为我自己点开它的时候，会想起他拍的那条东京街头，穿白衬衫的人在便利店门口停了三秒。奇人xuwei 在他那篇长文里说过一句话，大意是：形式是给内容让路的，但有时候形式本身就是内容。我半信半疑，但记下了。
中间我还踩了一个小众坑。出于好奇，我去翻了 白丝+水嫩十八岁清纯 这个页面里的视频模块，发现它用了 preload="metadata"，页面首屏轻了不少。我把这个属性加进去，Lighthouse 的加载分从 71 蹦到 89。我不迷信分数，但这个变化我喜欢。至于那个被到处转发的 ww.jdyy1.me 上的模板，我看了两眼就关了——太花，我的眼睛受不了。
观点放这儿：自动播放的 MV，多数时候是一种打扰。
我知道这句话会被人反驳。有人说短视频时代，三秒抓不住人就被划走。可我还是觉得，一段需要被「插入」的 MV，应该先让看的人决定要不要按下播放。至少在我这个页面里，我给了那个按钮。它现在安安静静地待在封面中间，像一扇没锁的门，你爱进不进。凌晨两点十分，我关掉编辑器，给阿哲发了句「上线了」。他回了个竖大拇指的猫。