基于Redux缓存已加载WebM视频的技术实现问询

当然可以解决这个问题！你的核心痛点是重复请求视频资源和切换时的加载空白，本质上需要实现视频的预加载与缓存。下面结合React-Redux的场景，给你两个实用的方案：

方案一：利用浏览器缓存+预加载（最简便高效） #

首先要明确：localStorage其实不适合存视频——它的存储上限一般只有5-10MB，而短视频通常远大于这个尺寸。最直接的方式是利用浏览器的HTTP缓存，提前把视频加载到内存里，切换时直接读取缓存的资源。

具体实现思路：在组件初始化时，创建隐藏的<video>元素，把所有视频URL传入并设置preload="auto"，让浏览器提前下载并缓存这些视频。切换主视频时，直接使用已缓存的URL，完全不会有重新请求或加载延迟。

结合React-Redux的代码示例：

import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';

export const VideoDisplay = () => {
  // 从Redux状态中获取视频列表
  const videos = useSelector(state => state.videos || [
    "https://examplevideosource.com/video1.webm",
    "https://examplevideosource.com/video2.webm"
  ]);
  const [activeVidIndex, setActiveVidIndex] = useState(0);
  // 存储预加载的视频元素引用，避免重复创建
  const preloadedVideos = useState([])[0];

  useEffect(() => {
    // 批量预加载所有视频
    videos.forEach((videoUrl, index) => {
      if (!preloadedVideos[index]) {
        const videoEl = document.createElement('video');
        videoEl.src = videoUrl;
        videoEl.preload = 'auto'; // 告诉浏览器优先预加载视频资源
        // 可选：监听加载完成事件，确认资源已缓存
        videoEl.addEventListener('loadeddata', () => {
          console.log(`视频 ${videoUrl} 已完成预加载`);
        });
        preloadedVideos[index] = videoEl;
      }
    });

    // 设置自动切换定时器（这里设为5秒，你可以根据需求调整）
    const switchInterval = setInterval(() => {
      setActiveVidIndex(prev => (prev + 1) % videos.length);
    }, 5000);

    // 组件卸载时清理资源，避免内存泄漏
    return () => {
      clearInterval(switchInterval);
      preloadedVideos.forEach(video => video.remove());
    };
  }, [videos]);

  return (
    <div className="VideoDisplayer">
      <video 
        src={videos[activeVidIndex]} 
        autoPlay 
        muted 
        playsInline 
        // 处理视频加载失败的情况
        onError={(e) => console.error('视频播放出错:', e)}
      />
    </div>
  );
};

这个方案的优势：

• 实现简单，不需要额外的存储逻辑
• 完全利用浏览器的HTTP缓存机制，切换视频时几乎零延迟
• 资源占用可控，浏览器会自动管理缓存的生命周期

方案二：使用IndexedDB长期缓存（适合跨会话复用） #

如果需要用户下次打开页面时也不用重新下载视频，可以用IndexedDB——它支持大文件存储（上限通常在几百MB到几个GB，取决于浏览器），能长期保存视频Blob数据。

第一步：封装IndexedDB工具函数 #

先写一个简单的DB操作工具类，用来存储和读取视频Blob：

// src/utils/videoDB.js
const DB_NAME = 'VideoCache';
const STORE_NAME = 'videos';

// 打开数据库连接
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, 1);

    // 数据库首次创建或版本升级时初始化存储对象
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'url' });
      }
    };

    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
};

// 存储视频Blob到数据库
export const saveVideoToDB = async (url, blob) => {
  const db = await openDB();
  const transaction = db.transaction(STORE_NAME, 'readwrite');
  const store = transaction.objectStore(STORE_NAME);
  await store.put({ url, blob });
  await transaction.complete;
  db.close();
};

// 从数据库读取视频Blob
export const getVideoFromDB = async (url) => {
  const db = await openDB();
  const transaction = db.transaction(STORE_NAME, 'readonly');
  const store = transaction.objectStore(STORE_NAME);
  const request = store.get(url);
  await transaction.complete;
  db.close();
  return request.result?.blob;
};

第二步：在React组件中使用 #

import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { saveVideoToDB, getVideoFromDB } from './utils/videoDB';

export const VideoDisplay = () => {
  const videos = useSelector(state => state.videos || [
    "https://examplevideosource.com/video1.webm",
    "https://examplevideosource.com/video2.webm"
  ]);
  const [activeVidIndex, setActiveVidIndex] = useState(0);
  const [cachedVideoUrls, setCachedVideoUrls] = useState([]);

  useEffect(() => {
    const preloadAndCacheVideos = async () => {
      const processedUrls = [];
      for (const url of videos) {
        // 先检查数据库是否已有缓存
        const cachedBlob = await getVideoFromDB(url);
        if (cachedBlob) {
          // 将Blob转换为可播放的URL
          const blobUrl = URL.createObjectURL(cachedBlob);
          processedUrls.push(blobUrl);
        } else {
          // 下载视频并存储到数据库
          try {
            const response = await fetch(url);
            const blob = await response.blob();
            await saveVideoToDB(url, blob);
            const blobUrl = URL.createObjectURL(blob);
            processedUrls.push(blobUrl);
          } catch (err) {
            console.error(`下载视频失败 ${url}:`, err);
            // 缓存失败时回退到原URL
            processedUrls.push(url);
          }
        }
      }
      setCachedVideoUrls(processedUrls);
    };

    preloadAndCacheVideos();

    // 设置视频切换定时器
    const switchInterval = setInterval(() => {
      setActiveVidIndex(prev => (prev + 1) % videos.length);
    }, 5000);

    // 组件卸载时清理Blob URL，避免内存泄漏
    return () => {
      clearInterval(switchInterval);
      cachedVideoUrls.forEach(url => {
        if (url.startsWith('blob:')) {
          URL.revokeObjectURL(url);
        }
      });
    };
  }, [videos]);

  // 等待缓存完成前显示加载状态
  if (cachedVideoUrls.length === 0) {
    return <div className="VideoDisplayer">视频加载中...</div>;
  }

  return (
    <div className="VideoDisplayer">
      <video 
        src={cachedVideoUrls[activeVidIndex]} 
        autoPlay 
        muted 
        playsInline 
        onError={(e) => console.error('视频播放出错:', e)}
      />
    </div>
  );
};

这个方案的优势：

• 视频会长期保存在本地，用户下次打开页面无需重新下载
• 完全脱离对源服务器的依赖（只要缓存未失效）

额外注意事项 #

1. 格式兼容：确保webm和mp4格式在目标浏览器中都支持，必要时可以提供多种格式的fallback
2. 缓存失效：如果视频内容会更新，建议在URL中添加版本号（比如video1_v2.webm），或者定期清理IndexedDB的旧数据
3. 移动端优化：移动端内存有限，不要一次性预加载太多视频，可以改为只预加载当前和下一个视频
4. 内存管理：使用Blob URL时一定要在组件卸载时调用URL.revokeObjectURL释放内存

内容的提问来源于stack exchange，提问作者rDev