js 实现浏览器下载视频2种方法

简介: js 实现浏览器下载视频2种方法

第一种,这种比较节能,如果视频比较大。不会造成卡顿

fetch('你的视频地址.mp4').then(res => res.blob()).then(blob => {
 const a = document.createElement('a');
  document.body.appendChild(a)
  a.style.display = 'none'
  const url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = '视频.mp4';
  a.click();
  document.body.removeChild(a)
  window.URL.revokeObjectURL(url);
});

第二中,这种适合url地址中不带参数的地址,和text,wprd,pdf,等文件

不带参数地址比如 http:xxx.xxx.com/down.mp4

带参数地址比如 http:xxx.xxx.com/down.mp4?token=4165465164

带参数的文件流过大会导致页面卡顿 ,【这时后就应该用第一种下载】

downloads(){
      var url //下载地址
      var xhr = new XMLHttpRequest();
      xhr.open('get', url, true); // 也可以使用POST方式,根据接口
      //            xhr.setRequestHeader("dis_k",`cb9a62d3796e276f8707318b3c48ed3d`);
      // xhr.setRequestHeader("dis_t",`1617786336`);
      xhr.responseType = "blob"; // 返回类型blob
      xhr.onload = function () {
        if (this.status === 200) {
        var blob = this.response;
        var reader = new FileReader();
        reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
        reader.onload = function (e) {
          var a = document.createElement('a');
          a.download ='民间故事-'+weixinvideoplayer.title+'(完整版)'; //下载文件名
          a.href = e.target.result; 
          a.click();
          window.URL.revokeObjectURL(e.target.result)
        };
        }
      }; 
      xhr.send();
    },

前端面试题库 微信搜索 【MST题库】 查看面试题

识图小程序 微信搜索 【花千蒲】 【识图灵】 查看

相关文章
|
6月前
|
Web App开发 存储 数据处理
Chrome 下载大文件报错!用 Streamsaver.js 完美填坑
本文探讨了Chrome下载大文件报“网络错误”的原因及解决方案。由于Chrome对Blob数据有大小限制,导致大文件下载失败。通过将responseType改为ArrayBuffer可临时解决1-2G文件问题,但超3G仍会崩溃。最佳方案是使用Streamsaver.js实现流式下载,边接收边保存,避免内存溢出,完美支持超大文件下载。
3904 3
|
10月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1069 0
|
6月前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
466 0
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
|
10月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1187 80
|
7月前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
646 0
|
9月前
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
682 8
|
11月前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
807 4
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
|
10月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中

热门文章

最新文章