附件:视频卡片显示画面缩略图(迷你 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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user