請將手機轉為橫向

此 prototype 模擬「展開全螢幕」的橫向播放器
建議先關閉螢幕方向鎖定

上課教室・全螢幕播放器手勢縮放

需求收斂 v0.2（待確認事項已定案） ＋ 可互動 prototype（手機橫向 812×375，對應 Figma「播放中（顯示播放器 UI）」）

課程影片畫面
學員帳號浮水印
字幕不跟著放大，維持固定位置與字級
單元名稱至多一行單元名稱至多一行單元名稱至多一行單元名稱
00:00 / 09:40
1.0x
▶▶ 2 倍速播放中
手機／平板：直接雙指捏合、放大後單指拖曳平移、單擊開關 UI、長按 2 倍速。1x 時單指拖曳會觸發既有手勢（示意），放大後改為平移。
電腦：觸控板雙指捏合，或 ⌘/Ctrl＋滾輪縮放；放大後滑鼠拖曳平移；Shift＋上下拖曳模擬雙指捏合。

1. 範圍

  • 在範圍：上課教室影片播放器「展開全螢幕」狀態（手機橫向、平板直式／橫式）。
  • 不在範圍：非全螢幕的內嵌播放器（避免與頁面捲動、系統縮放衝突）、音檔單元、結尾畫面、AirPlay 投放中。
  • 目的：讓學員看清楚講者投影片、板書、程式碼等小字；不改動影片原始畫質。

2. 手勢與操作定義

操作1x（未放大）放大中（>1x）
雙指張開以兩指中點為中心放大繼續放大，上限 3x；超過上限有阻尼感，放開彈回 3x＋輕觸覺回饋
雙指捏合有阻尼感，放開彈回 1x（不可小於原尺寸）縮小；放開時若 < 1.1x 自動吸附回 1x＋輕觸覺回饋
雙指移動—縮放同時平移
單指拖曳沿用現行單指滑動手勢（快轉等）平移優先：既有單指滑動手勢暫停，改為平移畫面，不可拖出影片邊界（邊緣有彈性）；還原 1x 後恢復
單擊顯示／隱藏播放器 UI（與現行一致，縮放狀態不變）
長按2 倍速（與現行一致，縮放狀態不變）
雙擊不觸發縮放，維持現行雙擊行為
「還原」按鈕不顯示一鍵動畫回到 1x 並置中
時間軸、按鈕點在 UI 元件上時，優先給元件，不觸發平移

3. UI 元件

  • 倍率提示（HUD）：手勢進行中於畫面上方中央顯示「2.4x」，手指放開 1 秒後淡出。
  • 還原按鈕：放大中才出現，位置在時間軸右上方（與左側時間文字對齊），顯示「2.0x・還原」。
    • 跟著播放器 UI 一起顯示／隱藏；另外在每次縮放手勢結束後強制顯示 3 秒，讓使用者知道怎麼回去。
  • 不跟著縮放：播放器 UI、字幕、浮水印（浮水印維持在螢幕層，避免放大後被裁掉而失去防盜效果）。

4. 狀態保留與重置

情境縮放狀態
暫停／播放、±10 秒、拖曳時間軸、切換倍速、長按 2 倍速、開關字幕保留
開啟單元列表／設定面板後關閉保留
上一單元／下一單元／從列表切換單元、自動播放下一單元重置 1x
離開全螢幕、旋轉螢幕、播放完畢出現結尾畫面、App 進背景後回來重置 1x
開始 AirPlay / 投放重置 1x（投放端不縮放）

5. 規格數值 可再調

  • 倍率範圍：1x – 3x；吸附門檻 1.1x；超出範圍阻尼係數 0.35。
  • 回彈動畫 280ms ease-out；HUD 放開後 1s 淡出；還原按鈕手勢後保留 3s。
  • 平移邊界：以「影片畫面」為邊界（不含左右黑邊）；畫面放大後寬度未超過螢幕時，水平維持置中。
  • 觸覺回饋：到達 3x 上限、吸附回 1x 時各一次 light impact。

6. 埋點建議

  • player_zoom_in：{ max_scale, course_id, unit_id, position_sec }
  • player_zoom_reset：{ method: pinch | button | unit_change | exit_fullscreen, duration_sec }
  • 用來判斷：哪些課程／秒數最常被放大 → 回饋給內容團隊（字太小的投影片）。

7. 已確認決策 2026-10-05

議題結論
雙擊放大不做。雙擊維持現行行為，縮放只靠雙指與還原按鈕。
倍率上限3x。
單指手勢衝突現行有單指滑動手勢；放大中改由「平移」優先，回到 1x 後恢復既有手勢。
平移邊界（含平板直式）以影片畫面為邊界，不可拖進黑邊。放大後影片高（寬）仍小於螢幕時，該方向維持置中、不可拖動；超過螢幕後才能在影片範圍內平移。
參考：iOS 照片 App 的影片、YouTube Premium 的「放大」都以影片內容為邊界，不會露出影片外的黑邊。
記住倍率不記。每次切換單元、重新進入全螢幕都從 1x 開始。