Ajax call freezes the page when downloading video stream (mp4)

Question

I am attemping an AJAX call where I get an MP4 and set the source of an hmtl5 <video> tag.

        //...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")
            })

When I run this final ajax promise, the page freezes. The file is not very large, so I believe my ajax call is incorrectly handling the download of the video.

I am not getting any errors, but as you can see the file.mp4 is downloading into browser memory:

What am I doing wrong?

I'm not sure this helps, but give it a try anyway, instaed of downloading the file over ajax, do `$('video-source').attr('src', data.data)`. The browser will download the video automatically when the `src` attribute changes. And the code the browser uses for that is probably better optimized for large files than jQuery's AJAX, or any JavaScript implementation for that matter. — bigblind, Jun 14 '16 at 23:20
@bigblind this is great advice. But how do you give access to src so that the URL is available? see new code: http://stackoverflow.com/questions/37839766/ajax-jwt-auth-for-video-load-via-src — ApathyBear, Jun 15 '16 at 15:33
Oh, I didn't realize you had to send along a token to get the media. — bigblind, Jun 15 '16 at 15:35

score 0 · Answer 1 · answered Jul 03 '16 at 21:28

Base64 is the worst response you can get back. It's ~3x larger. This ajax method is bad cuz you have to download the hole movie before you can look at anything

Best solution would be if you can download chunks and append it to the video https://developers.google.com/web/updates/2011/11/Stream-video-using-the-MediaSource-API?hl=en

Even better if you can add the token header via service worker fetchEvent.

Ajax call freezes the page when downloading video stream (mp4)

1 Answers1