web-dev-qa-db-ja.com

ビデオオブジェクトのソースファイルをblobのURLに設定する

例として、次の属性を持つvideoオブジェクトがWebサイトに設定されているとします。

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

元のソースは./video/video.mp4 （例えば）。

元のソースファイルの場所をBLOB urlに変換して保護するにはどうすればよいですか？

JavaScript内で実行する必要があると述べた投稿をいくつか目にしましたが、実際にそれを行う方法を説明するほど、またはどこで見つけることができるのかはわかりません。

それで、あなたはどうしますか？それを行う最良の方法は何ですか？

私はJavaScriptが一番ではないので、少し明白な質問のように思える場合は謝罪してください。

ありがとう。 :-)

javascripthtmlvideo
7
GROVER.

responseTypeをblobに設定し、new XMLHttpRequest()を使用して動画をリクエストします。

readAsDataURLを使用して_xhr.result_をnew FileReader()に渡すと、base-64でエンコードされたファイルの文字列表現が得られます。

この文字列をatobに渡して、base-64でエンコードされた文字列をバイナリデータの各バイトを表す文字列にデコードします。これで、バイト文字列に対してarrayループを使用して、バイト値のcharCodeAtを作成できます。

このarrayをnew Uint8Array()に渡して、8ビットの符号なし整数の型付き配列を作成し、new Blob()コンストラクターに渡すことができます。

blobを取得したので、URL.createObjectURL()を使用して、作成したblobを渡すことができます。作成されたオブジェクトのURLは、src DOM要素の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>_
18
DavidDomain

Blob URLを作成するために、 この答え を見つけました。これにより、DavidDomainの回答（100 MBを超えるビデオファイルの場合、許容できないほど長い時間がかかりました）よりもはるかに速く大きなファイルが読み込まれます。ただし、これによりビデオ全体がブラウザのメモリにダウンロードされ、データがDOMに埋め込まれるため、ファイルが大きい場合でもパフォーマンスの問題が発生する可能性があります。

ビデオの「元のソースファイルの場所を保護する」理由は何ですか？何かが動画の場所を見つけて動画ファイルをリクエストした場合、そのファイルを提供する必要があります。それはサーバーの仕事です。

AFAIKでは、ビデオファイルを取得するために必要なURLを公開せずにビデオファイルをロードすることは事実上不可能です。 （それをDOMサーバー側に埋め込むことは技術的に可能であるはずですが、ページが何かを表示する前にビデオ全体がロードされ、使用できなくなります）

1
Multihunter

100個に分けます。 JavaScriptで（おそらく秘密の命令を使用して）再構成を難読化し、縮小されていることを確認します。

CORS設定も確認してください。

0
Simon_Weaver