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

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?