Vue-Html5-Video组件视频缓存本地技术

在Vue中使用video标签实现视频缓存，可以通过以下方式：

1. 使用localStorage来保存视频观看进度。
2. 监听video的play和pause事件来更新localStorage中的进度信息。
3. 当video组件挂载时，检查localStorage中的进度信息，并设置到video元素上。

以下是一个简单的Vue组件示例，展示了如何实现视频缓存功能：

<template>
  <div>
    <video
      ref="video"
      controls
      @play="onPlay"
      @pause="onPause"
      :src="videoSrc"
    ></video>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/your/video.mp4',
    };
  },
  mounted() {
    this.restoreVideoProgress();
  },
  methods: {
    onPlay() {
      this.saveVideoProgress(this.$refs.video.currentTime);
    },
    onPause() {
      this.saveVideoProgress(this.$refs.video.currentTime);
    },
    saveVideoProgress(currentTime) {
      localStorage.setItem('videoProgress', currentTime.toString());
    },
    restoreVideoProgress() {
      const progress = localStorage.getItem('videoProgress');
      if (progress) {
        this.$refs.video.currentTime = parseFloat(progress);
      }
    },
  },
};
</script>

在这个例子中，视频的播放进度会被保存在localStorage中，并在页面加载时恢复。当视频播放或暂停时，onPlay和onPause方法会被调用，并更新保存的进度。

请注意，这个例子没有考虑视频的时长或其他边界情况，并且localStorage的使用有一定的限制（例如，它对数据大小有限制，并且只在浏览器会话中保持数据），但它可以作为一个简单的视频缓存示例来说明其思路。