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

问题描述

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

并且原始来源是 ./video/video.mp4(例如).

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

我看到一些帖子说它需要通过 JavaScript 来完成，但实际上没有一个帖子解释如何去做，或者你可以在哪里找到.

那么，你会怎么做；最好的方法是什么?

解决方案

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

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

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

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

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

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

var xhr = new XMLHttpRequest();xhr.responseType = 'blob';xhr.onload = 函数(){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>

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?

解决方案

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>

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