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

【问题标题】：set video objects source file to a blob url将视频对象源文件设置为 blob url
【发布时间】：2016-12-16 12:55:08
【问题描述】：

例如，假设我在我的网站上设置了一个 video 对象，并具有以下属性：

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

原始来源是./video/video.mp4（例如）。

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

我看到一些帖子说它需要通过 JavaScript 在内部完成，但没有一个真正达到解释如何做到这一点，或者你可以在哪里找到。

那么，你会怎么做呢？最好的方法是什么？

【问题讨论】：

标签： javascript html video

【解决方案1】：

使用new XMLHttpRequest() 请求视频，并将responseType 设置为blob。

使用readAsDataURL 将xhr.result 传递给new FileReader()，这将为您提供文件的base-64 编码字符串表示形式。

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

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

现在您有了blob，您可以使用URL.createObjectURL() 并将创建的blob 传递给它。创建的对象 url 可以传递给 video DOM 元素的 src 属性。

这是一个快速而肮脏的例子。希望能帮助到你。确保查看所有正在使用的方法的文档并检查它们的浏览器支持。不过，这不会保护您的视频不被下载。

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();

&lt;video controls="" preload="auto" id="_video"&gt;&lt;/video&gt;

【讨论】：

您好，我对此进行了测试，视频源设置为blob:blah.blah/blah。但是，媒体从未真正加载。无论我使用什么视频以及它来自哪里。我觉得这与type: "image/jpg" 有关，但我不太确定，因为我以前从未这样做过？
对不起，我的错。我在使用图像之前已经对此进行了测试，因为我无法快速找到带有视频文件的 url。只需将 mime 类型更改为所需的 mime 类型。我更新了我的例子。确保浏览器支持视频文件格式。
已将其从 image/jpg 更新为 video/MP4，但仍为空白：/ 有什么想法吗？

【解决方案2】：

为了创建 Blob URL，我找到了this answer。这将比 DavidDomain 的答案更快地加载大文件（对于我的 >100MB 视频文件的情况，这花费了不可接受的时间）。虽然，我相信这会将整个视频下载到浏览器的内存中，并将数据嵌入到 DOM 中，因此较大的文件仍可能导致其他性能问题。

为什么要“[保护]视频的原始源文件位置”？如果有东西找到视频的位置并请求视频文件，那么应该提供该文件：这是服务器的工作。

AFAIK 在不公开获取该视频文件所需的 URL 的情况下加载视频文件几乎是不可能的。（在技术上应该可以将其嵌入到 DOM 服务器端，但这会强制在页面显示任何内容之前加载整个视频，并且将无法使用）

【讨论】：