前端下载视频

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>

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