Custom Video Player
自訂控制列的影片播放器，播放時控制列自動淡出，支援進度拖曳、音量、全螢幕與鍵盤操作。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2400
<CustomVideoPlayer />
安裝
npx shadcn@latest add https://webberui.com/r/custom-video-player.json或在 components.json 設定 registries 後，改用 @webberui/custom-video-player 安裝。
安裝依賴後，從 registry JSON（/r/custom-video-player.json 的 files[0].content）複製 custom-video-player.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { CustomVideoPlayer } from "@/components/ui/custom-video-player";
<CustomVideoPlayer
src="/videos/demo.mp4"
poster="/videos/demo-poster.jpg"
className="w-full max-w-2xl"
/>自動播放時多數瀏覽器要求同時 muted：
<CustomVideoPlayer src="/videos/loop.mp4" autoPlay loop muted />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
src | string | — | 影片來源網址 |
poster | string | — | 封面圖，播放前顯示 |
autoPlay | boolean | false | 自動播放（通常需搭配 muted） |
loop | boolean | false | 循環播放 |
muted | boolean | false | 初始是否靜音 |
hideControlsDelay | number | 2400 | 播放中無操作幾毫秒後淡出控制列 |
autoHide | boolean | true | 是否啟用控制列自動淡出 |
aspectRatio | string | "16 / 9" | 容器的 CSS aspect-ratio |
label | string | "影片播放器" | 播放器容器的無障礙標籤 |
onPlayStateChange | (playing: boolean) => void | — | 播放狀態改變時的回呼 |
className | string | — | 追加到容器的 className |
細節
- 控制列在播放且無操作時淡出並隱藏游標，游標移動、觸控、聚焦或按鍵時立即重現；暫停或播放結束時恆亮。
- 進度條可點擊定位與拖曳刷動（使用 pointer capture，游標移出播放器仍持續生效）。
- 內建 duration 修正：遇到
duration為Infinity的串流或MediaRecorderblob，會自動觸發重新計算，讓進度與時間顯示正確。 - 音量滑桿平時收合，滑鼠移入或聚焦音量區時展開。
可及性
- 使用者系統開啟「減少動態效果」時，控制列停用自動淡出並恆亮，過渡動畫時長歸零。
- 完整鍵盤操作（聚焦播放器後）：
空白鍵/K：播放／暫停←/→（或J/L）：後退／前進 5 秒↑/↓：音量增減Home/End：跳到開頭／結尾M：靜音切換F：全螢幕切換
- 進度條為
role="slider"，帶aria-valuemin/max/now與aria-valuetext；各控制鈕皆有aria-label，靜音與全螢幕鈕以aria-pressed反映狀態。