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

Question

我正在尝试一个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正在下载到浏览器内存中：

我做错了什么？

Answer 1

Base64是您可以获得的最差回复。它大约3倍。这个ajax方法很糟糕因为你必须先下载空洞电影才能看到任何东西

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

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