视频防止下载 仅播放技术 blob 方案

使用blob视频流加密的形式

 

使用blob视频流加密的形式主要涉及以下几个步骤：

1. 视频文件转换为Blob对象： 首先，需要将视频文件转换为Blob对象。这可以通过JavaScript的fetch API来实现，将视频文件以Blob的形式获取。例如：

   javascript

   fetch('video.mp4')
   .then(response => response.blob())
   .then(blob => {
       const videoUrl = URL.createObjectURL(blob);
       document.querySelector('video').src = videoUrl;
   });

   这样，视频文件就被转换成了一个Blob对象，并且通过URL.createObjectURL方法创建了一个可以被<video>标签使用的URL。

2. 服务端处理： 在服务端，需要读取视频文件，并将其作为流传输到前端。这通常涉及到将文件内容读取为二进制数据，并通过HTTP响应发送给客户端。PHP代码示例如下：

   php

   $file_path = "...mp4"; //视频文件地址
   ob_end_clean();
   ob_start();
   $handler = fopen($file_path, 'rb');
   $file_size = filesize($file_path);
   Header("Content-type: application/octet-stream");
   Header("Accept-Ranges: bytes");
   Header("Accept-Length: ".$file_size);
   Header("Content-Disposition: attachment; filename=" . basename( $file_path));
   $oct_data = fread($handler,$file_size);
   fclose($handler);
   ob_end_flush();
   return $oct_data;

   这样，服务端将视频文件作为二进制流发送到客户端。

3. 前端接收并播放： 在前端，使用XMLHttpRequest对象接收服务端发送的二进制流，并将其转换为Blob对象，然后创建一个URL并赋值给<video>标签的src属性，实现视频的播放。JavaScript代码示例如下：

   javascript

   var xhr = new XMLHttpRequest();
   var url =""; //服务端地址
   xhr.open('POST', url, true);
   xhr.responseType = 'blob';
   xhr.onload = function (e) {
       if (this.status == 200) {
           var video = document.getElementById('video_player');
           video.onload = function(e) {
               window.URL.revokeObjectURL(video.src);
           };
           video.src = window.URL.createObjectURL(this.response);
           video.play();
       }
   };
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xhr.send('id='+id);//传递参数

   这样，前端就可以播放从服务端接收到的视频流，而不需要将视频文件下载到本地。

4. 视频加密： 对于视频加密，可以使用WebCrypt API对视频进行加密解密操作。首先生成一个加密密钥，然后使用该密钥对视频数据进行加密。加密后的视频数据被封装成Blob对象，并创建一个URL用于播放。示例代码如下：

   javascript复制

   const algorithm = { name: 'AES-GCM', iv: new Uint8Array(12) };
   const key = crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
   fetch('video.mp4')
   .then(response => response.arrayBuffer())
   .then(buffer => crypto.subtle.encrypt(algorithm, key, buffer))
   .then(encryptedVideo => {
       const encryptedBlob = new Blob([encryptedVideo]);
       const encryptedUrl = URL.createObjectURL(encryptedBlob);
       document.querySelector('video').src = encryptedUrl;
   });

   这样，视频在播放前就被加密，增加了视频内容的安全性。

通过上述步骤，可以实现使用blob视频流加密的形式，以防止视频被非法下载，只能在线观看。