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

Vue.js本身并不提供将视频缓存到本地的功能，但是可以通过使用HTML5的video标签和浏览器提供的缓存机制来实现。

具体实现步骤如下：

1. 在Vue组件中使用video标签来加载视频，如下所示：

```html <video ref="videoPlayer" controls>

<source :src="videoUrl" type="video/mp4">

</video> ```

其中，videoUrl是视频的URL地址。

2. 在mounted生命周期钩子函数中，获取video标签的DOM元素，并为其添加缓存属性，如下所示：

```javascript mounted() {

const video = this.$refs.videoPlayer;

video.setAttribute('preload', 'auto');

video.setAttribute('autoplay', '');

video.setAttribute('loop', '');

} ```

其中，preload属性设置为auto表示浏览器会自动缓存视频，autoplay属性设置为true表示视频加载完成后自动播放，loop属性设置为true表示循环播放。

3. 在video标签中添加一个事件监听器，监听视频的loadedmetadata事件，如下所示：

```html <video ref="videoPlayer" controls @loadedmetadata="cacheVideo">

<source :src="videoUrl" type="video/mp4">

</video> ```

4. 在Vue组件中定义cacheVideo方法，该方法会在视频加载完成后被调用，将视频缓存到本地，如下所示：

```javascript methods: {

cacheVideo() {

const video = this.$refs.videoPlayer;

const src = video.currentSrc;

const cache = window.caches.open('video-cache');

cache.then(cache => { cache.add(src);

});

}

} ```

其中，使用window.caches.open方法打开一个名为video-cache的缓存，然后使用cache.add方法将视频URL添加到缓存中。

5. 当下一次访问该视频时，浏览器会从缓存中加载视频，而不是从服务器重新下载。

需要注意的是，视频缓存到本地会占用一定的存储空间，需要根据实际情况进行权衡。