附件:视频卡片显示画面缩略图(迷你 video 预览,只拉视频头部)

视频卡此前只有 🎬 图标。现在卡片里放一个静音迷你 <video preload="metadata">:
浏览器只通过 media/show 拉视频头部几个 Range 区间就显示第一帧画面,
充当缩略图;点击行为不变(仍进灯箱播放)。老视频无需任何处理,
视频解不出来时 video 透明,露出下面的类型图标。

为什么不在服务端用 ffmpeg 抽帧:线上 FPM 的 open_basedir 只允许
/www/wwwroot/trip.yangyq.net/:/tmp/,且 disable_functions 禁了 exec()
(注意 CLI 与 FPM 的 php.ini 不同,只查 CLI 会得出错误结论)——
放开这两项需要 root 且弱化安全配置。迷你预览方案零后端、零数据、全兼容。

已验证:本地全链 11 步全绿(渲染检查 321 项);远端 e2e 324 项 0 失败
(夹具改用服务器静态 ffmpeg 生成真实编码视频);部署后双 PHP 渲染逐字节一致。
This commit is contained in:
2026-09-23 18:33:18 +08:00
parent a24099fc53
commit 0e30495f14
3 changed files with 27 additions and 1 deletions
+13
View File
@@ -847,6 +847,19 @@ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding
.photo-card .attachment-icon {
height: 100%; aspect-ratio: 4 / 3; font-size: 34px;
}
/* 批 9:视频缩略图 = 静音迷你 <video preload="metadata">,只拉头部显示第一帧。
盖在图标上;视频解不出来时透明,露出图标(pointer-events 让点击穿透到灯箱链接)。
show.php 附件墙:图标撑满 4:3 格 → 缩略图全格覆盖 */
.photo-card-icon .video-thumb-mini {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; background: transparent; pointer-events: none;
}
/* attachments.php 管理页(video 带 .video-thumb 类):卡片顶部是 96px 高的图标栏
(下有文字区),缩略图只盖图标区 —— 高度须与 .attachment-icon 的 96px 保持一致 */
video.video-thumb.video-thumb-mini {
position: absolute; top: 0; left: 0; width: 100%; height: 96px;
object-fit: cover; background: transparent; pointer-events: none;
}
.attachment-meta { padding: 9px 11px; display: flex; align-items: center; gap: 6px; }
.attachment-name {
font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;