html5 video 视频页面内缓存 - 全量加载方法

HTML5的video标签默认会根据视频的长度和大小进行缓存，但是这种方式可能会占用大量的带宽和内存，对于用户体验和网站性能都有一定的影响。如果你希望视频在页面内全部缓存，可以使用以下方法：

1. 使用preload属性设置预加载方式为auto，如下所示：

<video src="video.mp4" preload="auto"></video>

2. 在视频加载完成后，使用JavaScript将视频的缓存数据保存到本地缓存中，下次访问时直接从本地缓存中读取，如下所示：

var video = document.getElementsByTagName('video')[0];
video.addEventListener('canplaythrough', function() {
  var blob = new Blob([this.response], { type: 'video/mp4' });
  var url = URL.createObjectURL(blob);
  localStorage.setItem('video', url);
});

在这段代码中，我们监听了视频的canplaythrough事件，表示视频加载完成。然后将视频的响应数据保存到Blob对象中，并将Blob对象的URL存储到本地缓存中。

3. 下次访问时，从本地缓存中读取视频的URL，并设置到video标签的src属性中，如下所示：

var video = document.getElementsByTagName('video')[0];
var url = localStorage.getItem('video');
if (url) {
  video.src = url;
}

这样就可以实现网页内全部加载视频并缓存到本地的功能。但需要注意的是，这种方式可能会对用户的网络流量和设备存储空间造成一定的影响，需要根据实际情况进行选择。