set video objects source file to a blob url

问题

As an example, say I have a video object set on my website with the following attributes:

<video controls="" preload="auto" id="_video"></video>

and the original source being ./video/video.mp4 (for example).

How can I go about protecting the original source files location through converting it to a BLOB url?

I have seen a few posts stating that it needs to be done within through JavaScript, but none of them actually go to the extent of explaining how to do it, or where you can find out.

So, how would you do it; and what is the best way of doing it?

回答1:

Request the video using a new XMLHttpRequest() with the responseType set to blob.

Pass the xhr.result to a new FileReader() using readAsDataURL, which will give you a base-64 encoded string representation of the file.

Pass this string to atob to decode the base-64 encoded string to a string representing each byte of binary data. Now you can create an array of byte values using charCodeAt looping over the byte string.

This array can be passed to new Uint8Array() to create a typed array of 8-bit unsigned ints, which then can be passed to the new Blob() constructor.

Now that you have a blob you can use URL.createObjectURL() and pass the created blob to it. The created object url can be passed to the src attribute of your video DOM element.

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.

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';

xhr.onload = function() {
  
  var reader = new FileReader();
  
  reader.onloadend = function() {
  
    var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));
    
    var byteNumbers = new Array(byteCharacters.length);

    for (var i = 0; i < byteCharacters.length; i++) {
      
      byteNumbers[i] = byteCharacters.charCodeAt(i);
      
    }

    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], {type: 'video/ogg'});
    var url = URL.createObjectURL(blob);
    
    document.getElementById('_video').src = url;
    
  }
  
  reader.readAsDataURL(xhr.response);
  
};

xhr.open('GET', 'https://upload.wikimedia.org/wikipedia/commons/c/c0/Roaring_Burps.ogg');
xhr.send();

<video controls="" preload="auto" id="_video"></video>

回答2:

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)

来源：https://stackoverflow.com/questions/41184900/set-video-objects-source-file-to-a-blob-url

标签

javascript

html

video