当前位置：首页 > VUE

vue实现缓存视频

2026-03-08 19:10:32VUE

Vue 中实现视频缓存的方案

在 Vue 中实现视频缓存可以通过以下几种方法，具体选择取决于项目需求和浏览器兼容性。

使用 Service Worker 缓存视频资源

Service Worker 是浏览器在后台运行的脚本，可以拦截网络请求并缓存资源。通过注册 Service Worker，可以实现视频资源的离线缓存。

// 在 main.js 或单独的文件中注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    console.log('ServiceWorker registration successful');
  }).catch(err => {
    console.log('ServiceWorker registration failed: ', err);
  });
}

创建 sw.js 文件并定义缓存策略：

const CACHE_NAME = 'video-cache-v1';
const urlsToCache = [
  '/videos/sample.mp4',
  // 添加其他需要缓存的视频资源
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

利用 localStorage 或 IndexedDB 存储视频数据

对于较小的视频片段或需要精确控制的场景，可以将视频数据存储在 IndexedDB 中。

// 使用 IndexedDB 存储视频
function storeVideoInDB(videoUrl) {
  const request = indexedDB.open('VideoCacheDB', 1);

  request.onupgradeneeded = event => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('videos')) {
      db.createObjectStore('videos', { keyPath: 'url' });
    }
  };

  request.onsuccess = event => {
    const db = event.target.result;
    fetch(videoUrl)
      .then(response => response.blob())
      .then(blob => {
        const tx = db.transaction('videos', 'readwrite');
        const store = tx.objectStore('videos');
        store.put({ url: videoUrl, blob });
      });
  };
}

使用 vue-pwa 插件实现缓存

如果项目是基于 Vue CLI 创建的，可以使用 PWA 插件自动生成 Service Worker。

安装插件：

vue add pwa

在 vue.config.js 中配置缓存策略：

module.exports = {
  pwa: {
    workboxOptions: {
      runtimeCaching: [
        {
          urlPattern: /\.(mp4|webm)/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'video-cache',
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 7 * 24 * 60 * 60,
            },
          },
        },
      ],
    },
  },
};

实现视频分段加载与缓存

对于大视频文件，可以实现分段加载和缓存：

vue实现缓存视频

// 使用 MediaSource API 实现分段加载
function initMediaSource(videoElement) {
  const mediaSource = new MediaSource();
  videoElement.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', () => {
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

    fetchVideoSegment(0).then(segment => {
      sourceBuffer.appendBuffer(segment);
    });
  });
}

function fetchVideoSegment(segmentNumber) {
  return fetch(`/videos/segment-${segmentNumber}.mp4`)
    .then(response => response.arrayBuffer());
}