将视频对象源文件设置为Blob网址 [英] set video objects source file to a blob url

问题描述

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

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

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

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

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

如何通过将其转换为 BLOB网址来保护原始源文件的位置?

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

我看过几篇文章，指出它需要通过JavaScript来完成，但实际上，它们都没有解释如何做或在哪里可以找到.

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?

推荐答案

使用new XMLHttpRequest()并将responseType设置为blob的视频来请求视频.

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

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

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

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

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.

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

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.

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

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>

这篇关于将视频对象源文件设置为Blob网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！