From 0e30495f141325d0ac781715080d764f68ec98b5 Mon Sep 17 00:00:00 2001
From: laoyang <i@yangyq.net>
Date: Wed, 23 Sep 2026 18:33:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=84=E4=BB=B6=EF=BC=9A=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=98=BE=E7=A4=BA=E7=94=BB=E9=9D=A2=E7=BC=A9?=
 =?UTF-8?q?=E7=95=A5=E5=9B=BE=EF=BC=88=E8=BF=B7=E4=BD=A0=20video=20?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=EF=BC=8C=E5=8F=AA=E6=8B=89=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=A4=B4=E9=83=A8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

视频卡此前只有 🎬 图标。现在卡片里放一个静音迷你 <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 渲染逐字节一致。
---
 assets/style.css                | 13 +++++++++++++
 templates/nodes/attachments.php |  6 ++++++
 templates/nodes/show.php        |  9 ++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/assets/style.css b/assets/style.css
index 053ac90..d6342b2 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -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;
diff --git a/templates/nodes/attachments.php b/templates/nodes/attachments.php
index 4cf516d..cebb7d2 100644
--- a/templates/nodes/attachments.php
+++ b/templates/nodes/attachments.php
@@ -155,7 +155,13 @@ $iconByMime = [
                     <?php if ($isImg): ?>
                         <img src="<?= e($url) ?>" alt="<?= e($name) ?>" loading="lazy">
                     <?php else: ?>
+                        <?php /* 视频卡放静音迷你 <video preload="metadata"> 当缩略图：
+                           浏览器只拉头部就显示第一帧；加载不出来时透明露出图标 */ ?>
                         <div class="attachment-icon"><?= $icon ?></div>
+                        <?php if ($kind === 'video'): ?>
+                            <video class="video-thumb video-thumb-mini" src="<?= e($url) ?>"
+                                   muted preload="metadata" playsinline tabindex="-1"></video>
+                        <?php endif; ?>
                     <?php endif; ?>
                 </a>
 
diff --git a/templates/nodes/show.php b/templates/nodes/show.php
index ff86373..34a5e2f 100644
--- a/templates/nodes/show.php
+++ b/templates/nodes/show.php
@@ -182,11 +182,18 @@ $attIcon  = static function (string $mime): string {
                         <img src="<?= e(media_att($attId)) ?>" alt="<?= e($attName) ?>" loading="lazy">
                     </a>
                 <?php else: ?>
-                    <?php /* js-media：非图片走四态灯箱（视频/PDF 可预览，其它给下载） */ ?>
+                    <?php /* js-media：非图片走四态灯箱（视频/PDF 可预览，其它给下载）。
+                       视频卡放一个静音迷你 <video preload="metadata">：浏览器只拉视频头部
+                       （media/show 支持 Range）就显示第一帧画面，当缩略图用；
+       加载不出来时 video 透明，露出下面的类型图标（老视频无需任何处理） */ ?>
                     <a class="photo-card photo-card-icon js-media" href="<?= e(media_att($attId)) ?>"
                        data-kind="<?= $kind ?>" data-cap="<?= e($attName) ?>"
                        data-dl="<?= e(media_att($attId, true)) ?>" title="<?= e($attName) ?>">
                         <span class="attachment-icon"><?= $attIcon($attMime) ?></span>
+                        <?php if ($kind === 'video'): ?>
+                            <video class="video-thumb-mini" src="<?= e(media_att($attId)) ?>"
+                                   muted preload="metadata" playsinline tabindex="-1"></video>
+                        <?php endif; ?>
                     </a>
                 <?php endif; ?>
             <?php endforeach; ?>