媒體播放器 UI 系統
用途
媒體播放器 UI 系統提供一個標準化、可及且響應式的視覺設計框架，用於嵌入自訂的影音播放器介面。瀏覽器原生的 <video> 和 <audio> 控制項存在嚴重限制：跨瀏覽器視覺樣式不一致、缺乏品牌化外觀、觸控目標間距不佳、行動裝置視口控制項密度過高，以及鍵盤焦點無障礙性難以預測。
設計有效的自訂媒體播放器需要平衡影片畫框、疊加的漸層保護、控制列空間層級（播放/暫停觸發、時間軸拖曳、音量滑桿、播放速度、畫質、字幕、子母畫面、全螢幕）、響應式浮動視窗轉場，以及完整的 WCAG AA 無障礙合規性。此技能橋接了設計與技術實作，為網頁影音體驗定義了佈局規則、互動狀態、觸控人體工學以及螢幕閱讀器鍵盤控制。
使用案例
- 線上影片學習與課程平台： 建構包含播放速度選擇器、章節標記、隱藏式字幕切換、鍵盤快捷鍵及逐字稿同步的自訂影片播放器。
- SaaS 行銷產品展示與主打影片： 設計輕量、品牌化的內嵌影片播放器，具備浮動疊加觸發、循環/靜音控制，以及捲動時的黏性子母畫面浮動對接。
- Podcast 與音訊串流平台： 建構持續性的底部音訊播放器浮動視窗、內嵌音訊卡片播放器、波形視覺化工具，以及快轉/倒轉跳躍控制。
- 媒體入口網站與社論新聞網站： 呈現具備畫質選擇器、子母畫面選項、相關影片疊加層及無障礙字幕的響應式主打影片播放器。
- 設計系統元件庫： 為企業設計系統建立標準化、可主題化的媒體播放器視覺藍圖與無障礙模式。
何時不應使用
- 原始無樣式的瀏覽器控制項： 對於快速的內部工具或簡單的原型，標準的原生瀏覽器控制項（
controls屬性）已足夠，使用標準 HTML 標記即可。 - 完整的影片編輯或時間軸工作站： 對於需要時間軸拖曳軌道、關鍵影格操作及 WebGL Canvas 渲染的多軌非線性網頁影片編輯器，應使用專用的影片編輯應用程式。
- 純背景裝飾動畫： 對於沒有音訊、拖曳控制或使用者播放控制的環境 CSS 或 Canvas 動畫，請使用
interface-motion-system或標準的靜音背景循環。 - 靜態圖片燈箱與圖庫： 對於顯示靜態照片或投影片，不涉及基於時間的媒體播放，請使用
image-gallery-and-lightbox-system。
輸入
- 媒體類型與長寬比： 音訊與影片格式、原生長寬比（16:9 寬螢幕、9:16 直立影片、1:1 方形或彈性的音訊高度）。
- 控制密度需求： 所需的媒體控制項（例如：播放/暫停、時間軸拖曳、目前時間/持續時間、音量、播放速度、CC/字幕、畫質選擇器、PiP、全螢幕、跳轉 10 秒）。
- 主題與品牌代碼： 控制列背景疊加的顏色代碼、主要品牌播放強調色、拖曳進度條、焦點環與字體排版的顏色代碼（來自
accessible-color-system、focus-indicator-design-system和fluid-typography-system）。 - 佈局外殼上下文： 放置環境（內嵌內聯卡片、全寬區塊主打、底部持續黏性浮動視窗、模態疊加對話框）。
輸出
- 空間佈局與長寬比容器： CSS 架構，建立響應式框架、長寬比保留與疊加堆疊上下文。
- 控制列層級藍圖： 媒體控制工具列的視覺空間佈局（左側播放控制、中央時間軸拖曳、右側次要控制/全螢幕）。
- 時間軸拖曳與音量滑桿規範： 無障礙範圍控制，具備懸停時間預覽工具提示、已載入緩衝區指示器與視覺進度填充。
- 黏性子母畫面 (PiP) 浮動視窗轉場： 當使用者捲動超過主要視口容器時，將影片播放器摺疊為浮動底部角落迷你播放器的響應式規則。
- 無障礙 ARIA 與鍵盤導航對應： 完整的鍵盤快捷鍵規格（
Space、K、J、L、M、F、C、方向鍵）、ARIA 即時區域狀態播報器，以及 WCAG AA 對比度合規性。
工作流程
1. 建立空間容器與長寬比框架
建構基本容器以防止媒體載入時的版面配置位移 (CLS)：
- 長寬比盒子： 使用 CSS
aspect-ratio屬性將影片元素包裹在容器中（aspect-ratio: 16 / 9; width: 100%; position: relative; background: #000; border-radius: 8px; overflow: hidden;）。 - 媒體層疊加：
z-index: 1：原生的<video>或<canvas>媒體元素填滿容器（width: 100%; height: 100%; object-fit: contain;）。z-index: 2：保護控制列可讀性的深色漸層疊加層（background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 100%); pointer-events: none;）。z-index: 3：中央的播放/暫停大按鈕疊加層或載入骨架狀態。z-index: 4：底部（與可選的頂部）控制列工具列容器。
2. 設計中央大播放觸發按鈕與載入狀態
為初始播放互動提供顯著的視覺提示：
- 大播放按鈕疊加層： 在精確的視覺中心放置一個顯眼的 64x64px（桌面）或 56x56px（行動裝置）圓形按鈕（
top: 50%; left: 50%; transform: translate(-50%, -50%);）。- 樣式：
background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #FFFFFF;。 - 懸停/焦點：
scale(1.1); background: var(--brand-primary); border-color: transparent;。 - 行為： 一旦播放開始，淡出（
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;），暫停時重新出現。
- 樣式：
- 緩衝/載入旋轉圖示： 當媒體緩衝低於播放閾值時，在影片畫布中央顯示一個高對比度的圓形不定旋轉圖示疊加層。
3. 建構底部控制列層級
將控制項組織成一個乾淨的 3 部分彈性佈局，錨定在媒體框架底部：
- 容器定位：
position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; z-index: 4;。 - 主要拖曳列（第 1 行）： 將互動式時間軸拖曳條橫跨控制列頂部全寬放置，或在水平佈局中內嵌放置。
- 控制列動作列（第 2 行）：
- 左側群組（播放與音量）：
- 播放/暫停按鈕： 40x40px 圖示按鈕（
aria-label="Play"/aria-label="Pause"）。 - 向後/向前跳轉（可選）： 36x36px 按鈕，用於「向後跳 10 秒」/「向前跳 10 秒」。
- 音量群組： 靜音切換圖示按鈕 + 懸停/焦點可展開的範圍滑桿（
width: 0 -> 80px平滑過渡）或持續顯示的滑桿。 - 時間顯示： 使用等寬數字的文字計數器
02:14 / 10:45（font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: #FFFFFF;）。
- 播放/暫停按鈕： 40x40px 圖示按鈕（
- 右側群組（設定與螢幕模式）：
- 隱藏式字幕 (CC) 切換： 啟用時帶有視覺活動徽章高亮的圖示按鈕（
border-bottom: 2px solid var(--brand-primary)）。 - 播放速度選單觸發： 顯示當前速率的下拉選單或彈出按鈕（例如
1.0x、1.5x、2.0x）。 - 子母畫面 (PiP) 觸發： 啟動瀏覽器 PiP 模式的圖示按鈕。
- 全螢幕切換： 切換全視窗/全螢幕顯示的圖示按鈕（
aria-label="Enter fullscreen"/aria-label="Exit fullscreen"）。
- 隱藏式字幕 (CC) 切換： 啟用時帶有視覺活動徽章高亮的圖示按鈕（
- 左側群組（播放與音量）：
4. 建構無障礙時間軸拖曳條與音量滑桿
時間軸拖曳條必須完全適合觸控、精確且可透過鍵盤存取：
- 範圍輸入架構： 使用
<input type="range" min="0" max="100" step="0.1">或自訂的 ARIA 滑桿（role="slider"、aria-valuemin="0"、aria-valuemax="100"、aria-valuenow="23"、aria-valuetext="2 minutes 14 seconds of 10 minutes 45 seconds"）。 - 軌道層疊：
- 背景軌道： 基礎灰色軌道（
height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px;）。懸停/焦點時將軌道高度擴展至8px。 - 緩衝條： 顯示預先載入緩衝影片的次要條（
background: rgba(255,255,255,0.5);）。 - 已播放填充條： 顯示已播放進度的鮮明主要顏色條（
background: var(--brand-primary, #3B82F6);）。 - 拖曳拇指： 14x14px 圓形拇指手柄（
background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.4);）。懸停/拖曳時擴大至18x18px。
- 背景軌道： 基礎灰色軌道（
- 懸停時間預覽工具提示： 顯示一個浮動的時間戳記方塊（
background: #000; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;），定位在沿拖曳軌道的游標懸停位置上方。
5. 實作子母畫面 (PiP) 與捲動驅動的黏性浮動對接
當使用者向下捲動長篇文章或產品頁面時，防止失去影片上下文：
- 捲動觀察器 (IntersectionObserver)： 追蹤主要媒體容器何時捲出活躍視口閾值（<20% 可見）。
- 浮動迷你播放器狀態：
- 將播放器轉換為浮動的固定角落浮動視窗（
position: fixed; bottom: 24px; right: 24px; width: 320px; aspect-ratio: 16/9; z-index: 1000; box-shadow: var(--shadow-xl); border-radius: 12px; border: 1px solid var(--border-subtle); animation: slideInUp 0.3s ease;）。 - 在迷你播放器上新增右上角的關閉/展開按鈕（
aria-label="Dismiss sticky player"/aria-label="Return to video position"）。 - 在黏性模式下，將控制列簡化為主要的播放/暫停、關閉和靜音觸發。
- 將播放器轉換為浮動的固定角落浮動視窗（
6. 實作鍵盤快捷鍵與 ARIA 無障礙功能
確保完整的鍵盤控制，無需滑鼠或指標互動：
- 全域/聚焦鍵盤快捷鍵：
Space或K：切換播放/暫停。J：倒轉 10 秒。L：快轉 10 秒。左箭頭/右箭頭：倒轉 / 快轉 5 秒。上箭頭/下箭頭：增加 / 減少音量 10%。M：切換靜音 / 取消靜音。F：切換全螢幕模式。C：切換隱藏式字幕開 / 關。0到9：跳轉到影片總時長的 0% - 90%。
- 螢幕閱讀器狀態播報：
- 將狀態更新傳送到一個隱藏的
aria-live="polite"區域（例如："Paused at 2 minutes 14 seconds"、"Volume set to 80%"、"Captions enabled"）。
- 將狀態更新傳送到一個隱藏的
決策規則
媒體控制列佈局配置
| 媒體類型與放置位置 | 控制列空間模式 | 建議的關鍵控制項 |
|---|---|---|
| 主打影片 / 課程影片 (>640px) | 全浮動疊加列 | 完整控制項：中央大播放、完整拖曳條、時間、音量、CC、速度、PiP、全螢幕。 |
| 緊湊內嵌影片卡片 (<480px) | 精簡浮動列 | 基本控制項：播放/暫停、內嵌拖曳條、時間、靜音切換、全螢幕。 |
| 持續底部音訊浮動視窗 (全域) | 黏性 3 列列 | 左側：軌道資訊（縮圖 + 標題）；中央：播放/暫停 + 跳 10 秒 + 拖曳條；右側：音量 + 播放清單。 |
| 內嵌音訊 Podcast 卡片 | 水平內嵌方塊 | 播放/暫停圓形按鈕、軌道標題 + 進度拖曳條、目前時間 / 總時長、速度選單。 |
影片疊加層自動隱藏策略
- 播放時： 影片畫布內指標閒置 2.5 秒 後自動隱藏疊加控制列（
opacity: 0; cursor: none; transition: opacity 0.3s ease;）。 - 暫停或聚焦時： 保持控制列 永久可見（
opacity: 1），使控制項始終可立即觸及。 - 鍵盤焦點時： 每當鍵盤焦點進入播放器內的任何控制按鈕時，保持控制項立即可見（
:focus-within { opacity: 1; }）。
限制條件
- 無障礙 (WCAG 2.1 AA)：
- SC 1.2.2 字幕 (預錄)： 必須為包含語音的同步影片媒體提供隱藏式字幕按鈕。
- SC 1.4.3 對比度 (最低)： 控制圖示、文字計數器和拖曳進度軌道必須與控制疊加背景保持至少 4.5:1 的對比度。
- SC 2.1.1 鍵盤： 每個播放器功能（播放、暫停、搜尋、音量、CC、速度、全螢幕）都必須可完全透過鍵盤導航存取。
- SC 2.4.7 焦點可見： 聚焦的播放器控制按鈕必須顯示未裁剪的高對比度焦點指示器（
outline: 2px solid #FFFFFF; outline-offset: 2px;）。 - SC 2.5.8 目標大小： 互動式控制按鈕和滑桿拇指必須提供最小 24x24px 的點擊目標（行動/觸控視口最小 44x44px）。
- 防止版面配置位移： 必須使用 CSS
aspect-ratio或 padding-top 黑科技宣告長寬比包裝器，以防止影片載入期間的頁面佈局重新計算。 - 觸控手勢人體工學： 在行動觸控裝置上，雙擊影片畫布左右區域應觸發 10 秒向後/向前跳轉，並伴隨可見的漣漪回饋。
常見失敗模式
- 不可存取的原始自訂包裝器： 隱藏瀏覽器原生控制項，但未能為自訂 HTML
<div>按鈕提供鍵盤快捷鍵或 ARIA 屬性，完全阻擋了鍵盤和螢幕閱讀器使用者。 - 閃爍的疊加控制項： 在滑鼠正在拖曳滑桿附近活躍移動時，未經延遲或過渡立即隱藏控制列。
- 未受約束的全螢幕縮放： 在全螢幕模式下未能維持適當的長寬比，導致影片比例拉伸或變形。
- 淺色影片畫面上低對比度控制項： 在沒有底層深色漸層疊加層 (
rgba(0,0,0,0.7)) 的情況下渲染純白色控制圖示，使控制項在白色或明亮影片畫面上完全不可見。