将视频对象源文件设置为blob url

Question

举个例子,假设video我的网站上有一个具有以下属性的对象:

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

和原始来源./video/video.mp4(例如).

如何通过将原始源文件转换为BLOB URL来保护原始源文件？

我已经看到一些帖子说它需要通过JavaScript完成,但是它们都没有实际解释如何去做,或者你可以找到的地方.

那么,你会怎么做呢; 这样做的最佳方式是什么？

我不是最好的JavaScript,所以如果它看起来像一个明显的问题,请道歉.

谢谢.:-)

Answer 1

要求使用视频new XMLHttpRequest()与responseType设置为blob.

传递xhr.result给new FileReader()using readAsDataURL,它将为您提供文件的base-64编码字符串表示.

传递此字符串以atob将base-64编码的字符串解码为表示二进制数据的每个字节的字符串.现在,您可以array使用charCodeAt字节字符串循环创建一个字节值.

这array可以传递给new Uint8Array()创建一个8位无符号整数的类型数组,然后可以将其传递给new Blob()构造函数.

既然你有一个,blob你可以使用URL.createObjectURL()并将创建传递blob给它.创建的对象url可以传递给DOM元素的src属性video.

这是一个快速而肮脏的例子.希望能帮助到你.请务必查看所有使用方法的文档并检查其浏览器支持.这不会保护您的视频无法下载.

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>