你是否遇到過這樣的情況：觀看教學視頻時調整了播放速度，刷新頁面後又回到默認的1倍速？本文將基於 gh_mirrors/fr/frontend-stuff 項目技術棧，教你使用 localStorage（本地存儲）實現視頻播放速度的自動記憶功能，徹底解決重複調整的煩惱。讀完本文你將掌握：

  • 視頻播放速度與 localStorage 的關聯方法
  • 三步實現播放速度自動保存功能
  • 結合項目工具鏈的最佳實踐

技術原理與實現思路

核心技術棧

  • Web Storage API（本地存儲）：使用 localStorage 在瀏覽器中持久化保存數據
  • HTML5 Video（視頻元素）：通過 JavaScript 控制視頻播放速度

實現流程圖

前端緩存_視頻播放

代碼實現步驟

1. 基礎HTML結構

在視頻播放器頁面添加視頻元素和速度控制組件：

<video id="lessonVideo" controls>
  <source src="lecture.mp4" type="video/mp4">
</video>
<div class="speed-control">
  <label>播放速度:</label>
  <select id="speedSelector">
    <option value="0.5">0.5x</option>
    <option value="1">1x</option>
    <option value="1.25">1.25x</option>
    <option value="1.5">1.5x</option>
    <option value="2">2x</option>
  </select>
</div>

2. 核心JavaScript實現

創建視頻控制腳本文件，實現速度讀取、應用和保存邏輯：

// 獲取DOM元素
const video = document.getElementById('lessonVideo');
const speedSelector = document.getElementById('speedSelector');

// 從localStorage讀取保存的速度，默認1.0
const savedSpeed = localStorage.getItem('videoPlaybackSpeed');
if (savedSpeed) {
  video.playbackRate = parseFloat(savedSpeed);
  speedSelector.value = savedSpeed;
}

// 監聽速度選擇變化
speedSelector.addEventListener('change', function() {
  const newSpeed = parseFloat(this.value);
  // 應用新速度
  video.playbackRate = newSpeed;
  // 保存到localStorage
  localStorage.setItem('videoPlaybackSpeed', newSpeed);
});

3. 結合項目工具鏈

在 gh_mirrors/fr/frontend-stuff 項目中，可使用jscodeshift工具批量處理多個視頻頁面，實現功能複用。

項目集成與最佳實踐

依賴配置檢查

確保項目已配置必要的構建工具，查看項目依賴配置文件：package.json

瀏覽器兼容性處理

針對不同瀏覽器的 localStorage 支持情況，添加兼容性處理：

// 檢測localStorage支持
function checkStorageSupport() {
  try {
    const key = 'test_storage_support';
    localStorage.setItem(key, key);
    localStorage.removeItem(key);
    return true;
  } catch (e) {
    return false;
  }
}

// 使用前檢查
if (!checkStorageSupport()) {
  console.warn('瀏覽器不支持localStorage，無法保存播放速度');
}

功能測試與效果驗證

測試場景對比

操作場景

未實現記憶功能

實現localStorage記憶後

首次訪問

默認1.0倍速

默認1.0倍速

調整為1.5倍速

刷新後恢復1.0

刷新後保持1.5

關閉瀏覽器重開

恢復1.0

保持上次設置

項目擴展與優化建議

1. 按視頻ID保存不同速度

針對多視頻場景，可結合視頻ID保存不同的播放速度：

// 保存時
const videoId = 'lesson-123'; // 從視頻元數據獲取
localStorage.setItem(`videoSpeed_${videoId}`, newSpeed);

// 讀取時
const savedSpeed = localStorage.getItem(`videoSpeed_${videoId}`);

2. 結合項目自動化工具

使用項目中的jscodeshift工具批量添加此功能到所有視頻頁面，參考自動化代碼轉換教程。