video标签自定义下载

视频标签自定义下载可以通过以下代码实现：

// 视频下载，可以调用浏览器下载的进度条
load() {
  const video = this.$refs.video; // video标签
  const url = video.src;
  return fetch(url, { method: 'GET', cache: 'no-cache' }).then(res => {
    const fileStream = window.streamSaver.createWriteStream('test.mp4', { size: res.headers.get("content-length") })
    const readableStream = res.body
    if (window.WritableStream && readableStream.pipeTo) {
      return readableStream.pipeTo(fileStream).then(() => console.log('done writing'))
    }
    window.writer = fileStream.getWriter();
    const reader = res.body.getReader();
    const pump = () => reader.read().then(res => res.done ? window.writer.close() : window.writer.write(res.value).then(pump));
    pump();
  })
}

在这个代码中，我们使用了fetch函数来获取视频的资源，然后将其写入到一个文件流中。文件流的名字是"test.mp4"，你可以根据自己的需求修改它。接着，我们使用一个循环来读取视频的数据块，并将其写入到文件流中，直到视频的所有数据都被写入完毕。这样就实现了视频标签的自定义下载功能。<em>1</em><em>2</em>
#### 引用[.reference_title]
- *1* [video 视频下载，调用浏览器的下载进度方法](https://blog.csdn.net/jinse29/article/details/129724305)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [记录自己写的一个自定义vide标签自定义控制按钮事件播放器，video标签自定义按钮](https://blog.csdn.net/qq_38652871/article/details/94584427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]