如何使用 JavaScript 保存本地缓存的视频

本文将介绍如何使用 JavaScript 的 Blob 对象和 URL.createObjectURL() 方法保存 video 标签中已缓存到本地的视频文件。

步骤：

获取视频源: 首先，获取 video 标签中的视频源，可以通过 video 标签的 src 属性来获取：
```
var video = document.getElementById('myVideo');
var src = video.src;
```

使用 XMLHttpRequest 获取视频文件: 然后，使用 XMLHttpRequest 对象来获取视频文件：

var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = xhr.response;
    saveVideo(blob);
  }
};

xhr.send();

定义 saveVideo() 函数: 接下来，定义一个 saveVideo() 函数来保存视频文件。可以使用 URL.createObjectURL() 方法创建一个临时的 URL 来下载视频文件：
```
function saveVideo(blob) {
  var url = URL.createObjectURL(blob);

  var a = document.createElement('a');
  a.href = url;
  a.download = 'video.mp4';
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();

  setTimeout(function() {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}
```
在这个例子中，我们创建了一个 <a> 元素，设置 href 属性为视频文件的 URL，设置 download 属性为文件名，并将 <a> 元素添加到文档中。然后使用 click() 方法模拟点击下载链接。下载完成后，通过 setTimeout() 函数将 <a> 元素从文档中移除，并使用 URL.revokeObjectURL() 方法释放创建的临时 URL。
添加 video 标签: 最后，在 HTML 中添加一个 video 标签并设置 id 为 'myVideo'：
```
<video id="myVideo" src="video.mp4" controls></video>
```

总结:

通过以上步骤，当用户点击保存按钮时，就可以将 video 标签中已缓存到本地的视频保存到本地。

注意:

在 saveVideo() 函数中，download 属性用于指定保存的文件名。您可以根据需要更改文件名。
setTimeout() 函数用于延迟移除 <a> 元素，确保下载链接被点击后才移除。
为了方便演示，示例代码中使用了 video.mp4 作为视频文件源。请根据实际情况替换为您的视频文件路径。

希望本文能够帮助您了解如何使用 JavaScript 保存本地缓存的视频。