前端下载视频

kn
2021-03-19 14:08:17
前端

a标签下载

常见的下载方式一般是使用a标签，添加download属性进行下载

<a href="ai/8a25**********492.mp4" class="downword" download>下载</a>

但是这个只适用于你的项目和文件在一个服务器上，如果不在同一个服务器上，由于不符合同源策略，download属性就不会生效，会变成打开视频；

但是在公司的开发中，我们不会吧项目和下载的文件放在同一个服务器上，因为在下载文件的时候会占用大量的带宽，一般会放在其他的服务器上（比如七牛云）

js下载

    function downVideo(url) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.addEventListener("progress", function(obj) {
            if (obj.lengthComputable) {
                var percentComplete = obj.loaded / obj.total;
                console.log((percentComplete * 100).toFixed(2) + "%");
                // 可得到下载进度
            }
        }, false);
        xhr.responseType = 'blob'; // 设置返回类型blob
        xhr.onload = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let blob = this.response;
                // 转换一个blob链接
                let u = window.URL.createObjectURL(new Blob([blob], {
                    type: 'video/mp4'
                }))
                let a = document.createElement('a');
                a.download = url; //这里是文件名称，这里暂时用链接代替，可以替换
                a.href = u;
                a.style.display = 'none'
                document.body.appendChild(a)
                a.click();
                a.remove();
            }
        };
        xhr.send()
    }

注意

<!-- 正确 -->
<button onclick="downVideo('ai/8a2507b96740496b9c6a4f3d2c893492.mp4')">click</button>


<!-- 这么写html会解析错误，要注意，这个不注意的话很麻烦 -->
<button onclick="downVideo('https://test.ubgenius.cn/ai/8a2507b96740496b9c6a4f3d2c893492.mp4')">click</button>

建议通过一个函数把链接以字符串的形式拼出来，再提示开始下载，这样用户体验更好

写法2

function download(url) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        console.log('xhr.readyState ',xhr.readyState )
        if (xhr.readyState === 4) {
            vueData.showdownloading = false
            $("#showdownloading").text('下载')
            var link = document.createElement("a");
            var url = window.URL.createObjectURL(xhr.response);
            link.href = url;
            link.download = '1';
            link.click();
            window.URL.revokeObjectURL(url);
        }
    }
    xhr.onprogress = updateProgress;
    function updateProgress(event) {
        if(event.lengthComputable) {
            var percentComplete = event.loaded / event.total;
            console.log('event.loaded',event.loaded)
            console.log('event.total',event.total)
            console.log('event.percentComplete',percentComplete)
            $("#showdownloading").text('下载:'+Math.ceil(percentComplete*100)+'%')

        }
    }
    // 需要指定响应类型为 blob
    xhr.responseType = "blob";
    xhr.open("get", url);
    xhr.send();
}