当前位置：首页 > VUE

vue实现缓存视频

2026-02-17 06:54:33VUE

使用`<keep-alive>`组件缓存视频组件

在Vue中可以通过<keep-alive>组件缓存动态组件或路由组件，适用于视频播放器等需要保留状态的场景。将视频组件包裹在<keep-alive>中，切换时不会被销毁。

<template>
  <keep-alive>
    <video-player v-if="showPlayer" :src="videoUrl"/>
  </keep-alive>
</template>

利用LocalStorage存储视频进度

通过监听视频的timeupdate事件，将当前播放时间保存到LocalStorage。再次加载时读取存储的时间点并设置。

// 存储进度
videoElement.addEventListener('timeupdate', () => {
  localStorage.setItem('videoProgress', videoElement.currentTime);
});

// 恢复进度
const savedTime = localStorage.getItem('videoProgress');
if(savedTime) {
  videoElement.currentTime = parseFloat(savedTime);
}

实现Service Worker离线缓存

注册Service Worker来缓存视频资源，支持离线播放。需在install事件中缓存资源，在fetch事件中返回缓存的响应。

// sw.js
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('video-cache').then(cache => {
      return cache.addAll(['/videos/example.mp4']);
    })
  );
});

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

使用IndexedDB存储大视频文件

对于大型视频文件，可以使用IndexedDB进行存储和检索。这种方式适合需要本地持久化大量视频数据的应用。

// 打开数据库
const request = indexedDB.open('VideoDB', 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('videos', { keyPath: 'id' });
};

// 存储视频
function storeVideo(id, blob) {
  const transaction = db.transaction('videos', 'readwrite');
  transaction.objectStore('videos').put({ id, blob });
}

结合Vuex管理缓存状态

使用Vuex集中管理视频缓存状态，包括播放进度、收藏列表等。通过mutations更新状态，actions处理异步操作。

// store.js
const store = new Vuex.Store({
  state: {
    videoCache: {}
  },
  mutations: {
    cacheVideo(state, { id, data }) {
      state.videoCache[id] = data;
    }
  }
});