Communitygithub.com

juliangruber/video-compare-slider

在瀏覽器中並排比較兩部影片,透過可拖曳的滑塊進行分割——左側顯示A片,右側顯示B片,垂直線上的控制柄起始於50%——並同步控制播放、暫停、搜尋和逐幀步進。

video-compare-slider 是什麼?

這是一個瀏覽器端影片比較工具,允許用戶透過可拖曳的滑塊直觀地並排對比兩部影片,無需原生應用程式。它支援播放、暫停、逐幀步進和時間軸搜尋,並保持兩側影片的幀同步。基於img-comparison-slider(MIT許可)實現滑塊效果,並添加自訂同步邏輯來處理不同瀏覽器(Safari、Firefox、Chrome)的播放差異。它可以執行在檔案模式(透過硬連結,最適合Safari)或HTTP模式(本機伺服器,支援其他瀏覽器和跨卷宗影片)。支援多種選項,包括指定瀏覽器、起始時間、幀率和清理功能。還整合了visual-ab-duel技能,用於盲測比較多部影片,而不泄露其身份。開發者應使用它來比較不同渲染、編碼、調色、剪輯版本或鏡頭,或在變更前後進行A/B對比,但不用於靜態影像或計算指標(PSNR、SSIM、VMAF)。

相容平台✓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。
  • 如果用戶的機器通過任務佇列安排工作,或希望優先級較低,請按照他們要求的方式包裝命令(一個輕量、簡短的任務)。

腳本首先會列印 ffprobe 關於兩個檔案的資訊(編解碼器、像素格式、尺寸、影格率、長度、位元率),並針對任何差異或無法播放的內容給出備註:不同尺寸、影格率、長度或顏色標籤(顏色標籤不匹配會使兩側看起來不同,原因不在畫面本身)、Safari 以外的 ProRes、或 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 個或更多影格時會重新定位 B。在兩個 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。它的分割會跟隨滑鼠而不是控制柄,而且不播放聲音。

在滑塊中進行盲測對決(使用 visual-ab-duel 技能)

若要從多部影片中盲選,請執行 visual-ab-duel 錦標賽,並在滑塊中顯示每一對比,而不是靜止圖片:

  1. 閱讀 visual-ab-duel 技能並遵循其協議(每則訊息一對,不透露選項的身份)。
  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 會移除所有工作階段(當用戶刪除已比較的影片時,或審核工作階段結束時執行)。

相關技能