HTML page native VIDEO tag hides the download button function

When writing a web project, I encountered an introduction page with a separate introduction video. There was only this short video, so no video component was used. So I wanted to solve the problem by using the native video tag.

Although the introduction video is free, I don’t want a download button or the ability to save the video, so I found a way to make it look like there is no download function and took notes.

If you want to hide the download button above, three styles are enough. Let’s paste the code directly without further ado:

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 simply, it moves the download button outside the window, but it took me a long time to find these CSS! !

This method cannot really prevent the download of videos. "Attentive" users can still find the loaded video files in the cache files, so as the title says, it is just hidden.

To truly prevent video downloads, the video address must be encrypted and verified on the server side.

Summarize

The above is the editor's introduction to the HTML page native VIDEO tag hiding the download button function. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!