2026-05-18-19-41-29 修复样例视频浏览器显示

工程分析/经验记录.md

@@ -93,3 +93,15 @@ B. 产生问题原因：上一版将原始媒体查看入口作为辅助操作
 C. 解决问题方案：将右侧工作区拆成左右两个 `workspace-pane`：左侧固定展示原始视频/图像，右侧展示分割进度、摘要和结果帧；保留“放大查看”作为左侧面板内的辅助操作。
 
 D. 后续如何避免问题：医学影像交互页面应优先考虑“原始输入”和“算法输出”并列对照，而不是把原始输入藏在结果区域的附属操作中。
+
+## 2026-05-18-19-41-29 样例视频浏览器不显示画面
+
+### 1. 样例视频控件显示但画面不渲染
+
+A. 具体问题：用户点击“加载样例”后，左侧“查看原始视频”出现视频控件，但看不到原始视频画面。
+
+B. 产生问题原因：内置样例视频由 OpenCV 直接写出，编码为 `mpeg4/mp4v`；Chrome 对这种 MP4 兼容性不如 H.264 稳定，可能只显示控件不显示画面。
+
+C. 解决问题方案：修改样例生成脚本，生成后用 `ffmpeg` 转码为 `libx264`、`yuv420p`、`faststart` MP4；前端视频加载后调用 `load()` 并在 metadata 加载后轻微 seek 到 `0.1s`。
+
+D. 后续如何避免问题：面向网页播放的样例视频统一转为 H.264/yuv420p，并用 Chrome 实际播放或截图验证，而不是只验证 OpenCV 能读取。