set video objects source file to a blob url

To make the Blob URL, I found this answer. This will load large files much faster than DavidDomain's answer (which took unacceptably long for my case of a >100MB video file). Although, I believe that this will download the whole video into the browser's memory, and embed the data into the DOM, so larger files might still cause other performance issues.

Why do you want to "[protect] the original source files location" of the video? If something finds the video's location and requests the video file, then that file should be served: that's a server's job.

AFAIK it's practically impossible to load a video file without exposing the URL required to obtain that video file. (It should be technically possible to embed it into the DOM server-side, but that would force the entire video to be loaded before the page shows anything, and would be unusable)


Here is a quick and dirty example. Hope it helps.

Make sure to go over the docs of all of the methods being used and check their browser support. This will not protect your video from being downloadable though.

// Request the video using a new XMLHttpRequest() with the 
// responseType set to blob.
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';

xhr.onload = function(){
    var reader = new FileReader();
  
    reader.onloadend = function(){
        // Pass this string to atob to decode the base-64 encoded string to a string 
        // representing each byte of binary data.
        var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));
        
        // Now you can create an array of byte values using charCodeAt and looping 
        // over the byte string.
        var byteNumbers = new Array(byteCharacters.length);
        for(var i = 0; i < byteCharacters.length; i++){
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }

        // Pass the resulting array to Uint8Array to create a typed array of 
        // 8-bit, unsigned integers. 
        var byteArray = new Uint8Array(byteNumbers);

        // This can then can be passed to the Blob constructor.
        var blob = new Blob([byteArray], {type: 'video/ogg'});

        // Now that you have a blob, you can pass it to the createObjectURL method.
        var url = URL.createObjectURL(blob);
    
        // The resulting URL can be attached to the src attribute of your video.
        document.getElementById('video').src = url;
    }
  
    // Pass the response to the FileReader using readAsDataURL.
    // This will give you a base-64 encoded string representation of the file.
    reader.readAsDataURL(xhr.response);
};

xhr.open('GET', 'https://upload.wikimedia.org/wikipedia/commons/c/c0/Roaring_Burps.ogg');
xhr.send();
<video controls="" id="video"></video>

Tags:

Javascript

Html

Video

Recent Posts