Several processing methods to prevent video from being downloaded

1. The video download function is disabled

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

2. Hide the right mouse button and prohibit copying links

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

3. Use third-party playback controls such as cloud-on-demand, and set up anti-leech if best;

4. Use blob video stream encryption;

Some browsers, such as qq browser, will intercept the video tag to obtain the playback link. When the user moves the mouse over the player, the word download will appear. In order to solve this problem, we use the form of blob video stream to encrypt;

At present, there are many adopting this method on the market: such as Bilibili, Watermelon Video, etc., as shown in the figure:

insert image description here

BLOB : Binary Large Object, a container that can store binary files. The use of blob binary streams in Video requires support from both the front and back ends.

After getting the blob object, generate a temporary address through URL.createObjectURL, assign it to the src attribute of the video tag, and that's it. But in fact, the binary object can be received directly from the server, that is, the server converts the video file into a binary object, and sends it to the front end through the interface, and the front end generates a dom string again.

Among them, the BLOB-related API is also provided on the browser side, and a blog object is generated through new Blog(...).

After the front end obtains the blob object, the operation is as follows;

jq writing method:

    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 native writing method:

 <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. Video slice encryption:

If you are loading a large video, this will waste a lot of traffic, and the loading process will continue to occupy bandwidth.

At this time, we will use video fragmentation processing.

Just imagine, if we cut the video into sections, only load one section at a time, and then load another section after watching, which can effectively save resources.

Still take a video at station B as an example. In the Network in F12, you can see that the website has been requesting video stream data segment by segment. (PS: this m4s is a format of HTML)

Slice encryption principle : Slice the video from MP4 files into multiple ts files, and use AES-128 to encrypt each piece of video, and finally generate m3u8 files. Here we need to use ffmpeg.

insert image description here