How to prevent a browser from caching videos?

Issue

I'm developing a website for school. It's a online store with a cart. One of it's requirements is to upload, erase and display videos, one for each product. I decided to use inputs of type video for this.

Each product has one video, and all the administrators can upload, erase and view videos correctly. The problem is that when I erase one and upload another video, the first video stays in cache and gets displayed instead of the second one. Even if I refresh or clean the browser's cache it stays like that.

I'm absolutely sure videos are not the same (already checked), but I can tell that maybe the browser thinks they are because their files have the same name. I decided to store the video files according to the id of the product, because each product has only one video and that simplifies things.

So that, when I upload a second video, it has the same name as the first one. Is that a problem? How can I prevent this from happening?

Solution

The problem is that when i erase one and upload another video, the first video stays in cache and get's displayed instead of the second one.

You should assign a new filename when the video is replaced. Generate and store a random filename (or a MD5/SHA1 hash of the file's contents, perhaps) when a video is uploaded, rather than overwriting the same file location.

Alternatively, store the date/time the video is changed, and add that as a query string parameter on the video's URL, like video.mp4?time=1481754713, which the browser will see as a separate URL for caching purposes.

Answered By - ceejayoz