利用浏览器缓存技术实现视频离线播放：localStorage与CacheAPI的应用

方法一

要实现视频被播放过后本地有缓存，下次播放无需网络即可播放，你可以利用浏览器的本地存储功能（如localStorage或IndexedDB）来实现。

你可以在视频播放结束时，将视频的URL以及相关信息存储在本地存储中。然后，在下次需要播放视频时，首先检查本地存储中是否存在该视频的缓存，如果存在则直接使用本地缓存的视频文件进行播放，而不是通过网络请求获取视频文件。

这里是一个简单的示例代码，以localStorage为例：

// 在视频播放结束时保存视频信息到本地存储

videoElement.addEventListener('ended', function() {

localStorage.setItem('cachedVideoUrl', 'path_to_cached_video.mp4');

});

// 在需要播放视频时，检查本地存储中是否有缓存，如果有则使用缓存的视频文件

let cachedVideoUrl = localStorage.getItem('cachedVideoUrl');

if (cachedVideoUrl) {

videoElement.src = cachedVideoUrl;

} else {

// 从网络加载视频

videoElement.src = 'path_to_original_video.mp4';

}

在实际应用中，你还需要处理一些额外的情况，比如缓存过期、更新缓存等，以确保用户始终能够正常播放视频。同时，你也可以考虑使用服务工作线程来管理视频的缓存，这样可以更好地控制缓存策略。

方法二

使用浏览器的 Cache API 来实现视频的缓存。通过在用户访问视频时将视频文件保存在缓存中，下次用户再次访问相同的视频时可以直接从缓存中加载，而无需再次请求网络

// 检查浏览器是否支持 Cache API

if('caches' in window) {

// 打开一个名为 videoCache 的缓存

caches.open('videoCache').then((cache) => {

// 检查缓存中是否已经有该视频文件

cache.match('video.mp4').then((response) => {

if(response) {

// 如果缓存中存在该视频文件，直接从缓存中获取

response.blob().then((blob) => {

let videoUrl = URL.createObjectURL(blob);

// 将 videoUrl 设置为视频播放源

videoElement.src = videoUrl;

});

} else {

// 如果缓存中不存在该视频文件，从网络请求并存储到缓存中

fetch('video.mp4').then((response) => {

if(response.ok) {

cache.put('video.mp4', response.clone());

// 将 response 设置为视频播放源

videoElement.src = URL.createObjectURL(response);

}

});

}

});

});

}

我们首先检查浏览器是否支持 Cache API，然后打开一个名为 videoCache 的缓存。接着检查缓存中是否有视频文件，如果有则直接从缓存中获取视频文件进行播放；如果没有，则从网络请求视频文件并存储到缓存中，然后再进行播放。 请注意，使用 Cache API 需要考虑到缓存策略、缓存更新等问题，以保证视频缓存功能的稳定和可靠性