HTML page native video tag hides the download button

When writing a web project, I encountered a separate introduction video on the introduction page. There is only this short video, so I did not use any video components, so I wanted to solve the problem by using the native video tag.

Although the intro video is non-paid, I don't want a download button or save the video as, so find a way to make it appear that there is no download function, and take notes.

If you want to hide the above download button, you can use three styles, just paste the code without nonsense:

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 50px); 
}

To put it bluntly, it is to move the download button outside the window, but these CSS have been looking for a long time! !

 

This method can't really prevent the download of the video. "Attentive" users can still find the loaded video file in the cache file, so it's just hidden as the title says.

To truly prevent the download of the video, it is still necessary to encrypt and verify the video address through the server.

Well, above.