Communitygithub.com

视频对比滑块

在浏览器中通过可拖动的滑块并排对比两个视频——左侧播放视频A,右侧播放视频B,滑块起始位置为50%。支持同步播放、暂停、逐帧前进和后退,适用于渲染、编码、调色、剪辑或版本对比等场景。

视频对比滑块 是什么?

该技能通过一个本地HTML页面,将两个视频以相同尺寸叠加显示,中间有一条带手柄的垂直分割线:分割线左侧显示视频A,右侧显示视频B,手柄默认位于50%位置。控件栏支持同步播放、暂停、逐帧前进/后退和拖拽进度条。它基于img-comparison-slider库(MIT许可证,已原封不动地集成在assets/目录下)实现擦除效果,并结合了自定义同步代码。在macOS上,两个浏览器引擎可以硬件解码两个2880x2160的H.264视频流,无需原生应用。脚本会自动检查视频的编码、像素格式、尺寸、帧率、时长和码率,并报告任何不匹配或可能播放异常的情况(如尺寸、帧率、时长或色彩标签不匹配)。它支持Safari的文件模式(最快,甚至能实时播放ProRes 422 HQ)和Firefox/Chrome的HTTP模式(支持视频拖拽定位),还提供了丰富的键盘快捷键和鼠标控制。同步精度高:暂停或步进时保证显示同一帧;播放时B跟随A,偏差通常不超过一帧。如果视频无法播放(如ProRes在非Safari浏览器上),脚本会给出明确的错误信息并建议创建代理文件。此外,该技能还支持与视觉AB对决技能配合进行盲测,通过修改后的滑块页面隐藏视频文件名,让用户仅凭画面质量进行主观评价。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add juliangruber/video-compare-slider

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

视频对比滑块 是做什么的?

打开一个本地页面,两个视频以相同尺寸叠加,中间有一条带手柄的垂直分割线:分割线左侧显示视频A,右侧显示视频B。手柄默认位于中间位置。一个控件栏可同步播放、暂停、拖拽进度和逐帧前进/后退两个视频。

基于 img-comparison-slider(MIT许可证,已原封不动地集成在 assets/ 目录,许可证文件位于 assets/LICENSE-img-comparison-slider)实现擦除效果,并结合了页面的自定义同步代码。在macOS上,两个浏览器引擎可以硬件解码两个2880x2160的H.264视频流,因此无需原生应用。

运行

python3 ~/.claude/skills/video-compare-slider/scripts/vcompare.py A.mp4 B.mp4
  • Safari(macOS默认浏览器):文件模式。 脚本将两个视频和页面硬链接到一个私有文件夹中(/private/tmp/vcompare-<uid>/<session>/,不占用额外磁盘空间,不会在视频所在目录写入任何内容),然后在Safari中打开该页面并立即返回。这是WebKit读取大文件最快的方式:甚至可以实时播放ProRes 422 HQ。
  • Firefox、Chrome或视频位于其他卷:HTTP模式。 启动一个小型本地服务器(127.0.0.1,支持HTTP Range请求以实现拖拽定位,仅提供页面和两个视频),运行直至停止。请将其作为后台任务运行,向用户提供它打印的URL,并在用户完成后停止任务(它会删除其会话文件夹)。
  • 选项:--browser safari|firefox|chrome|default|none(none:仅打印URL),--mode auto|file|http,--start SECONDS,--fps N(逐帧步进;默认使用A的帧率),--port N,--cleanup。
  • 如果用户的机器通过任务队列路由工作,或者希望设置优先级(nice),请按照用户要求的方式包装命令(一个轻量、短小的任务)。

脚本首先会打印ffprobe关于两个文件的信息(编码、像素格式、尺寸、帧率、时长、码率),并提示任何不匹配或无法播放的情况:不同的尺寸、帧率、时长或色彩标签(色彩标签不匹配会导致两侧画面看起来不同,但这并非因画面本身差异造成)、ProReS在Safari之外无法播放、或4:2:2/4:4:4的H.264/HEVC。请将这些提示告知用户。

告诉用户如何使用

控制功能
拖动手柄移动分割线(仅拖动手柄有效)
空格键 或 点击画面播放/暂停两个视频
, .(或 ‹ › 按钮)后退/前进一帧
左/右方向键(Shift:x10倍)后退/前进1秒
Home / End跳至开始/结束
[ ](Shift:10%)将分割线移动1%
0分割线重置到50%
s交换左右两侧
m静音(声音来自A)
f全屏

进度条、时间码(HH:MM:SS:FF)和帧号位于控件栏中;文件名显示在顶部角落。控件栏和指针在无鼠标活动2.5秒后会淡出(以便无中断观看,例如全屏);移动鼠标即可恢复显示,键盘快捷键无需恢复显示也能正常工作。

同步效果预期

  • 暂停、步进或拖拽进度: 两侧始终显示完全相同的帧(都会跳转到帧的中间位置,页面会等待两侧都到达后再显示)。
  • 播放中: 两侧同时启动;B跟随A。控件栏会显示B帧与A帧的差距(B +0f)。Chrome和Firefox会最多调整B的播放速度5%以使其与A帧同步;Safari在视频速度改变时会停顿,当B偏离4帧或更多时会重新跳转到正确帧。在对两个2880x2160 H.264渲染视频的测试中,两个引擎都保持了帧同步。要检查用户机器上的同步效果,请在页面URL后附加 #selftest:它会播放10秒并显示偏离帧数、丢帧数和帧精度。
  • 一侧的停顿(如慢速磁盘、跳转)会保持另一侧等待,直到两者都能播放。

视频无法播放时

当浏览器仅将视频加载为音频(无画面)或完全无法加载时,页面会显示提示信息。

  • ProRes: 仅Safari可播放。否则请使用ffmpeg制作代理文件: ffmpeg -i IN.mov -c:v libx264 -crf 14 -pix_fmt yuv420p -g 24 -c:a aac -b:a 320k -movflags +faststart OUT.mp4。 请对两个视频采用相同方式制作代理文件,以保证对比公平;当需要比较颗粒或精细细节时,请使用较低的CRF值(10-14):代理文件会平滑颗粒。在进行长时间转码前请先询问用户。
  • 帧精确保留播放或原生工具: brew install video-compare(pixop/video-compare,GPL-2.0许可证,基于FFmpeg和SDL2),然后运行 video-compare -W A B。它的分割线跟随鼠标移动而非通过手柄控制,并且不支持声音播放。

在滑块中进行盲测(配合视觉AB对决技能)

要在多个视频中盲选,请运行视觉AB对决锦标赛,并在滑块中展示每一轮对决,而非静态图像:

  1. 阅读视觉AB对决的技能说明并遵循其协议(每轮一个消息对,不包含任何可识别选项的信息)。
  2. 其 candidates.json 文件需要为每个候选提供 image(每个视频同一时刻的单帧图像,8位:工具会根据这些图像生成对决图片)和 clip:完整视频。请放入当前版本的视频。
  3. 运行 duel.py --state DIR init candidates.json --no-open,然后对每一轮对决运行: python3 ~/.claude/skills/video-compare-slider/scripts/duel_slider.py --state DIR 会以盲测方式打开当前对决对,标记为“第M轮,图像1”(左侧)和“图像2”(右侧),并仅打印对决轮次号和URL。(如果使用 --mode http 它会持续提供:请在后台运行,并在获得答案后停止。)
  4. 用户回答1、2或太接近;按照对决技能说明执行 record/defer/reshuffle,然后执行 next --no-open 和 duel_slider.py。跳过对决的 moments 和 clips 步骤(用户可以在滑块中自由拖拽到任何时间点,而 clips 会复制整个文件)。最后执行 reveal 揭示结果。

不要在用户面前手动对对决候选视频运行 vcompare.py:它会打印文件名。

日常维护

文件模式的会话文件夹包含硬链接:用户删除视频后,只要硬链接仍然存在,数据就会保留在磁盘上。脚本每次运行时都会删除超过6小时的会话;vcompare.py --cleanup 会删除所有会话(请在用户删除已比较的视频时,或在一次审阅会话结束时执行此操作)。

相关技能