Cache Busting a Video File with Javascript

MacDawg · May 28, 2018

Seems like a simple thing to do, but I haven't been able to find a solution

Standard HTML file calling video tag

Code:

<video width="1920" height "1080" autoplay loop src="movie.mp4">

I want to automate an upload with a new(er) movie with the same name to replace the file
However, the browser will continue to play the cached file even when the page is refreshed

I would like to be able to possibly append the filename with Date.now() to differentiate it and make the browser call the file again using Javascript. I have been able to do this with images, but not with the video.

My Image Code that works:

Code:

<script language="javascript">

function updateImage() {
    obj = document.imagename;
    obj.src = obj.src.split("?")[0] + "?" + Date.now();
    setTimeout("updateImage()",1000);

</script>
<body onload="updateImage();">
<img name="imagename" src="image.png" />

With this, I can hotswap an image and it refreshes at the designated interval (1 sec here) without a page refresh. With the video, I don't even need hotswapping, I just want to be able to upload a new video with the same name, refresh the page and have the new video play instead of the cached video.

I've Googled a lot of partial and/or vague solutions, but nothing definitive that meets what I am trying to do. Seems simple, but I am out of ideas.

Thoughts?

Mitthrawnuruodo · Jun 29, 2018

Not sure this will work (the videos I tested with wasn't cached even without the hack), but it's basically a trick I use to avoid caching of scripts, css and - especially - external files accessed using a timestamp in a query to trick the cache, so maybe, just maybe it will work with videos, too? This is basically the same thing you used for the images...

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test me</title>
</head>
<body>
    <h1>Video test</h1>
    <video id="myvideo" width="360" height="240" autoplay loop src="small.mp4">
    <script>
        let v = document.getElementById("myvideo");
        let f = v.getAttribute('src');
        let d = Date.now();
        v.setAttribute ("src", f+"?now="+d);
    </script>
</body>
</html>

Search

Search

Cache Busting a Video File with Javascript

MacDawg

Moderator emeritus

Mitthrawnuruodo

Moderator emeritus

Our Staff