下载视频获取视频进度，并改名_前端根据视频链接下载视频到本地并重命名显示进度-CSDN博客

本文链接：https://blog.csdn.net/songJunFeng1/article/details/121786859
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>

<body>
    <div class="progress">
        <div class="progress-bar" id="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <script>
        progressDownLoad({
            url: 'https://vd3.bdstatic.com/mda-mjp3sxs69krni5nw/540p/h264_cae/1635043238343290962/mda-mjp3sxs69krni5nw.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1638934364-0-0-251b4eb39a701b5acd6ae08819a40600&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=&klogid=0164148039',
            name: 'file.rar',
            progress: function(evt) {}
        });

        function progressDownLoad({
            url,
            params,
            progress,
            success
        }) {
            console.log(arguments);
            var filename = "";
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
            //监听进度事件
            xhr.addEventListener("progress", function(evt) {
                if (progress) try {
                    progress.call(evt);
                    console.log(parseInt((evt.loaded / evt.total) * 100), '======');
                    document.querySelector('#progress').setAttribute('aria-valuenow', parseInt((evt.loaded / evt.total) * 100))
                    document.querySelector('#progress').style.width = parseInt((evt.loaded / evt.total) * 100) + '%'
                } catch (e) {}
            }, false);
            //请求类型
            xhr.responseType = "blob";
            //设置请求头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
            //回调方法
            xhr.onreadystatechange = function() {

                if (xhr.readyState === 4 && xhr.status === 200) {

                    if (typeof window.chrome !== 'undefined') {
                        // Chrome version
                        //创建下载节点

                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(xhr.response);
                        //获取文件名
                        // filename = xhr.getResponseHeader("Content-disposition").split('=')[1];
                        link.download = "123.mp4";
                        link.click();
                    }
                    if (success) try {
                        success.call(xhr);
                    } catch (e) {}
                }
            };

            var paramsStr = '';

            if (params)
                for (var key in params) paramsStr += '&' + key + '=' + params[key];

            if (paramsStr) paramsStr = paramsStr.substring(1);

            xhr.send(paramsStr);

        }
    </script>
    </script>
</body>

</html>