视频封面截出来全黑时,我先怀疑的是截图动作执行早了。这次我测了加上黑色片头的海浪素材,等到画面数据加载完成以后再截图仍然得到黑图。等待并没有失效,播放器此时拿到的第一帧本来就没有可见景物,换一个加载事件也不会把海浪提前搬到片头。
为了分清这个问题,我把原来的海浪版本与开头加了1秒纯黑的加工版本放在一起比较。素材不是我拍的。黑色片头是为了验证问题特意加的。原对照是6秒、640×360的短片,加上黑片头后变成7秒。我想检查的事情很小:黑图究竟来自没有画到像素,还是来自已经画对了的黑色像素。这两种情况在黑底预览框里容易混过去。
最早的一次截图发生在表示视频元信息已经准备好的 loadedmetadata 事件里。首批三种浏览器内核的冰岛海浪对照在这个阶段一共截了60次,得到的都是透明空图。宽高已经能读到了。画布还没有实际画面。把它放在黑色背景上看会像黑屏,放到浅色底上又会换一种样子。只看背景色不够。我需要继续检查预览框中的像素来确定到底有没有画进去。
后面等到 loadeddata 再画时就能从海浪对照里看见不透明的实际画面。两种格式在三种内核中合计60次都有可见海浪,这个结果只覆盖本机的短视频。这里还有一个细节:我并没有把“保存出PNG文件”算作成功。空画布也能保存,所以检查文件能否打开回答不了画面有没有被画进去。
加过黑片头的版本帮我排除了另一种误会。它在 loadeddata 和初始的视频帧回调之后都是黑色,透明度却已经和前面的空图不同了。测试记录中的平均 alpha 是255,像素本身不透明。这时重试截图并不会改变选中的内容。文件没有坏,只是取第一帧的规则不适合这份素材。
这张对照来自本机复现页。左边是加入黑片头后的已加载画面,右边是移过黑片头后实际取出的海浪。画面源于 Alexander Grebenkov 的冰岛海浪影片,原许可为 CC BY 3.0;本轮做了截短、缩放和添加黑片头,用来区分选错时刻与没有画面。
把“等多久”和“截哪里”分开让我找到了更清楚的排查顺序。前者处理画面是否就绪,后者决定封面选哪个时刻。如果原片开头就是淡入、字幕前的停顿或纯黑片段,截图动作完全正确也能交回一张不适合展示的封面。这些情况需要通过回播放器里看原片来核对。等待不会换内容。
这轮环境是 Chromium 149.0.7827.55、Firefox 151.0 和 WebKit 26.5 的测试构建,其中 WebKit 不是正式版 Safari。视频通过本机HTTP服务读取且没有模拟移动网络。我还没把手机省流、后台标签页或损坏文件加进来,也就没有证据把这组结果说成所有黑图的原因。它只能帮我先分开两类已经复现的情况。
我用的是图映 ImgIng 的视频抠像 Beta 工作台做另一项检查,将同一海浪测试素材的播放位置设到2.117秒后运行当前帧预览。这里的用途只是观察界面怎样交代结果,我把两条路径分开记录。这个 Beta 功能优先支持桌面 Chrome 和 Edge,我没有把它当成通用视频封面工具。
这次界面显示的是“当前帧没有识别到明显主体”。海浪里没有突出的人物,界面没有报解码错误。这个对照提醒我别把预览里缺少想要的内容直接归因为截帧失败。我只完成了导入、定位和当前帧预览,既没有验证整片导出也没有找到按帧号前进后退的独立按钮。
图里的白色结果区和右侧状态属于抠像预览。它不是黑片头截图。看结果时需要连着提示一起读才能避免只凭一块颜色将不同问题混在一起。本文也不根据这张图评价抠像质量而只记录这条操作实际走到了什么状态。
回到自己的封面功能,我现在会先打开原片确认准备截取的时刻确实有想要的内容。如果画布看起来仍然发黑就先将预览背景换成明亮的颜色,再检查透明度。透明空图和不透明黑帧走不同的排查方向。确认是片头内容后再选择一个有景物的时刻,等待定位完成之后重新查看生成图片。封面能保存只是中间一步,最后还得看它是否真的代表这段视频。
- 素材出处:Ocean waves at Lækjavik beach, Iceland,Alexander Grebenkov,CC BY 3.0。