ビデオのダウンロードを防ぐいくつかの処理方法

1.ビデオダウンロード機能が無効になっています

<video controlslist="nodownload"></video>

2. マウスの右ボタンを非表示にし、リンクのコピーを禁止します。

document.oncontextmenu = function () {
    
    
	return false;
}

3. クラウドオンデマンドなどのサードパーティの再生コントロールを使用し、可能な場合はアンチリーチを設定します。

4. BLOB ビデオストリーム暗号化を使用します。

QQ ブラウザなどの一部のブラウザは、ビデオタグをインターセプトして再生リンクを取得します。ユーザーがプレーヤーの上にマウスを移動すると、ダウンロードという単語が表示されます。この問題を解決するために、BLOB ビデオストリームの形式を使用します。暗号化する。

現在、図に示すように、Bilibili、Watermelon Video など、この方法を採用しているものが市場に多数存在します。

ここに画像の説明を挿入

BLOB : バイナリラージオブジェクト、バイナリファイルを格納できるコンテナ。ビデオで BLOB バイナリストリームを使用するには、フロントエンドとバックエンドの両方からのサポートが必要です。

BLOB オブジェクトを取得したら、URL.createObjectURL を通じて一時アドレスを生成し、それを video タグの src 属性に割り当てます。これで完了です。しかし、実際には、バイナリオブジェクトはサーバーから直接受け取ることができます。つまり、サーバーはビデオファイルをバイナリオブジェクトに変換し、インターフェイスを介してフロントエンドに送信し、フロントエンドで再度 dom 文字列を生成します。

このうちBLOB関連のAPIはブラウザ側でも提供されており、new Blog(...)を通じてブログオブジェクトが生成されます。

フロントエンドが BLOB オブジェクトを取得した後の操作は次のようになります。

jqの書き方：

    let xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://localhost:3001/video', true)
    xhr.responseType = 'blob'
    xhr.onload = function(e) {
    
    
      if (this.status === 200) {
    
    
        // 获取blob对象
        let blob = this.response
        console.log(blob)
        // 获取blob对象地址，并把值赋给容器
        $("#my-video").attr("src", URL.createObjectURL(blob));
      }
    }
    xhr.send()

jsネイティブの書き方：

 <script type="text/javascript">
  var video = document.getElementById("my-video");  
  window.URL = window.URL || window.webkitURL;  
  var xhr = new XMLHttpRequest();  
  var play_url = 'test.mp4';
  xhr.open("GET", play_url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
      
        
  	if (this.status == 200) {
      
        
  		var blob = this.response;  console.log(blob);
  		video.onload = function(e) {
      
        
  			window.URL.revokeObjectURL(video.src);
  		};
    	video.src = window.URL.createObjectURL(blob);
    }
  }
  xhr.send(); 
</script>

4. ビデオスライスの暗号化:

大きなビデオを読み込む場合、大量のトラフィックが無駄になり、読み込みプロセスが帯域幅を占有し続けます。

このとき、ビデオフラグメンテーション処理を使用します。

想像してみてください。ビデオをセクションに分割した場合、一度に 1 つのセクションだけをロードし、視聴後に別のセクションをロードすることで、リソースを効果的に節約できます。

ステーション B のビデオを例にとると、F12 のネットワークでは、Web サイトがセグメントごとにビデオストリームデータを要求していることがわかります。（追記：このm4sはHTMLのフォーマットです）

スライス暗号化の原理: MP4 ファイルからビデオを複数の ts ファイルにスライスし、AES-128 を使用して各ビデオを暗号化し、最終的に m3u8 ファイルを生成します。ここではffmpegを使用する必要があります。

ここに画像の説明を挿入