admin管理员组文章数量:1535044
第一种,这种比较节能,如果视频比较大。不会造成卡顿
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/down.mp4
带参数地址比如 http:xxx.xxx/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题库】 查看面试题
识图小程序 微信搜索 【花千蒲】 【识图灵】 查看
版权声明:本文标题:js 实现浏览器下载视频2种方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1726895506a1089087.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论