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题库】 查看面试题

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

相关文章
|
12天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
11天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
11天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
13天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
11天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
27 7
|
10天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
17天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
114 9
|
12天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
17天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
22天前
|
Web App开发 Java
使用java操作浏览器的工具selenium-java和webdriver下载地址
【10月更文挑战第12天】Selenium-java依赖包用于自动化Web测试,版本为3.141.59。ChromeDriver和EdgeDriver分别用于控制Chrome和Edge浏览器,需确保版本与浏览器匹配。示例代码展示了如何使用Selenium-java模拟登录CSDN,包括设置驱动路径、添加Cookies和获取页面源码。