下载视频流（mp4）时，Ajax 调用冻结页面答案

【问题标题】：Ajax call freezes the page when downloading video stream (mp4)下载视频流（mp4）时，Ajax 调用冻结页面
【发布时间】：2016-10-15 20:55:26
【问题描述】：

我正在尝试一个 AJAX 调用，在该调用中我得到一个 MP4 并设置 hmtl5 <video> 标签的来源。

        //...other promises that are successful... 

        // get mp4
        downloadurl.done(function(data) {
            console.log('Starting the ajax call for Stream')

            var stream = $.ajax({
                type: "GET",
                url: data.data,
                beforeSend : function(xhr) {
                    xhr.setRequestHeader("Authorization", "JWT " + access_token);
                },
                contentType: 'application/json',
                mimeType : "video/mp4",
                success: function(response){
                    $('video-source').attr('src', "data:video/mp4;base64," + response)
                },
                error:function(jqXHR, textStatus, errorThrown) {
                    console.log("request for secure stream failed: ", textStatus, errorThrown, jqXHR);
                },
            });
            stream.fail(function(){
                console.log("Stream Failed")
            })

当我运行这个最终的 ajax 承诺时，页面冻结了。该文件不是很大，所以我相信我的 ajax 调用错误地处理了视频的下载。

我没有收到任何错误，但您可以看到 file.mp4 正在下载到浏览器内存中：

我做错了什么？

【问题讨论】：

我不确定这是否有帮助，但还是试一试吧，不要通过 ajax 下载文件，请执行 $('video-source').attr('src', data.data)。当src 属性发生变化时，浏览器会自动下载视频。浏览器使用的代码可能比 jQuery 的 AJAX 或任何 JavaScript 实现更适合大文件。
@bigblind 这是一个很好的建议。但是您如何授予对 src 的访问权限以使 URL 可用？查看新代码：stackoverflow.com/questions/37839766/…
哦，我没有意识到您必须发送令牌才能获取媒体。

标签： javascript jquery ajax reactjs mp4

【解决方案1】：

Base64 是您能得到的最差响应。它大约大 3 倍。这个 ajax 方法不好，因为你必须先下载洞电影才能看任何东西

最好的解决方案是您可以下载块并将其附加到视频中 https://developers.google.com/web/updates/2011/11/Stream-video-using-the-MediaSource-API?hl=en

如果您可以通过 service worker fetchEvent 添加令牌标头，那就更好了。

【讨论】：