Set Video-Quelldatei zu einer Blob-URL

Question

Als Beispiel Objekte, sagen, ich habe einen video Objektsatz auf meiner Website mit den folgenden Attributen:

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

und die ursprüngliche Quelle ist ./video/video.mp4 (zum Beispiel).

Wie kann ich den ursprünglichen Speicherort der Quelldateien durch Umwandlung in eine BLOB-URL schützen?

Ich habe ein paar Posts gesehen, die darauf hinweisen, dass es innerhalb von JavaScript gemacht werden muss, aber keiner von ihnen geht tatsächlich so weit, dass man erklärt, wie man es macht oder wo man es herausfinden kann.

Also, wie würdest du es tun? und was ist der beste Weg dies zu tun?

Ich bin nicht der größte bei JavaScript, so Entschuldigung, wenn es scheint, wie eine offensichtliche Frage.

Danke. :-)

Answer 1

Fordern Sie das Video mit einer new XMLHttpRequest() mit der responseType auf blob festgelegt.

Übergeben Sie die xhr.result an eine new FileReader() mit readAsDataURL, die Ihnen eine Base-64-codierte Zeichenfolgendarstellung der Datei geben wird.

Übergeben Sie diese Zeichenfolge an atob, um die Base-64-codierte Zeichenfolge in einer Zeichenfolge zu dekodieren, die jedes Byte binärer Daten darstellt. Jetzt können Sie eine array Byte-Werte unter Verwendung charCodeAt Schleife über die Byte-Zeichenfolge erstellen.

Diese array kann new Uint8Array() geben werden eine typisierte Array von 8-bit unsigned int-Werten, zu erstellen, die dann das new Blob() Konstruktor übergeben werden können.

Jetzt, da Sie eine blob haben, können Sie URL.createObjectURL() verwenden und die erstellte blob daran übergeben. Die erstellte Objekt-URL kann an das src-Attribut Ihres DOM-Elements video übergeben werden.

Hier ist ein schnelles und schmutziges Beispiel. Ich hoffe es hilft. Stellen Sie sicher, dass Sie die Dokumente aller verwendeten Methoden durchgehen und überprüfen Sie deren Browser-Unterstützung. Dies schützt dein Video jedoch nicht davor, heruntergeladen zu werden.

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>