Explain Codes LogoExplain Codes Logo

Prevent HTML5 video from being downloaded (right-click saved)?

html
backend-security
video-streaming
drm
Alex KataevbyAlex Kataev·Mar 2, 2025
TLDR

Here's a simple approach to make your video resistant to the standard right-click and "Save As". Use CSS and JavaScript to add levels of front-end protection. This, however, should not be considered as a fool-proof solution.

Disable right-click using CSS:

video { pointer-events: none; } /* Ha! Right clicking is now pointless. */

Prevent context menu on video elements with JavaScript:

document.querySelector('video').addEventListener('contextmenu', e => { e.preventDefault(); /* You shall not pass, right-click menu! */ });

Remember: these methods merely dissuade the casual downloader. They won't deter those determined to download, notably those with dev skills. For comprehensive security, you might want to consider a streaming service or DRM protection.

Backend reinforcements: Saving the fortress

Going beyond the front-end, implementing comprehensive backend security measures, like server-side authentication, signed URLs, and rules to prevent direct file path access can thwart unauthorized downloads.

  1. Signed URLs: This method lets your server affirm that the party requesting the video is permitted access and within the authorized timeframe.

  2. Implement .htaccess rules: This regulates access to resources on your server, making it harder to uncover the video file's location.

Strengthening the gate: Streaming and encryption

Opt for streaming protocols like HLS or DASH. In these methods, videos are divided into short, encrypted segments that are difficult to combine without approval.

  1. DRM (Digital Rights Management): DRM combined with encryption maybe your best bet against unauthorized downloads. But remember, this method could be a bit complex and involves certain costs.

  2. Alternative rendering methods: Consider using HTML canvas element to draw the video. This may not be straightforward to implement, but if done right, can discourage direct downloads while maintaining playback performance.

The server is your watchtower: Customized server logic

Incorporate server-side logic to authorize or block access to your content based on criteria such as user credentials, geographic location, or even behavioral analysis.

A slow thief is a caught thief: Introduce speed barriers

Discourage pirates by implementing download speed controls. Downloaders can be slowed down by introducing rate limits or adaptive streaming which adjusts to the viewer's optimum connection speed.

The united front: Comprehensive security strategies

Combine the aforementioned methods for a holistic defense strategy. Remember, the goal is not to create an impregnable fortress, but to make attempting unauthorized downloads a hassle and unappealing.