Prevent Browser File Caching

Question

I need to disable caching for single files in all browsers. I have a website that generates small video clips. There is a preview stage where the results can be watched.

An mp4 called preview.mp4 is displayed. When the user goes back, edits the video and wants to preview it again, the old preview.mp4 is being displayed even though the file on the server is changed.

How can I prevent the caching of this video file? Or what are the other ways to fix it?

Note: it's a single page application so I don't reload any HTML files. Only PHP content. Hence the headers I set, are not useful in this scenario:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="cache-control" content="no-store" />

Thanks.

Answer 1

It's not the web page itself you should be concerned about, but the mp4 file which is downloaded and cached separately.

Ensure the response headers of the mp4 file prevent browser caching.

Cache-Control: no-cache