CODEWITHSUNDEEP
javascripthtmlvideo
Jonathan Kaye
Jonathan Kaye

Reputation: 3

HTML5/JavaScript - How to add a timestamp attribute to video source?

Having never used HTML or JavaScript before I'm really struggling to find an answer to this! I'm running a website for a local club which uses an online site builder so I haven't had to do any coding so far.

I want to show a timelapse video on one of the pages that updates every 30 mins via FTP (overwriting itself every time it updates). I've got the video uploading and playing fine but browsers are caching the video and not re-loading it when the page refreshes as the file name stays the same. I've done plenty of research and found that adding a random attribute, such as a timestamp, to the video src path would likely fix the issue (as per the below link) but I can't figure out how to do this.

Force browser to update cached HTML5 video object

As it's an online website builder, the only way to add code is to insert a 'HTML/Script' element and paste the code in there, so currently I have:

<video width="476" height="266" controls="" autoplay="">
<source src="http://mydomain.co.uk/Weather/today.mp4" 
new="" type="video/mp4"/>
Sorry, your browser does not support our time lapse video.
</video>

I'm under the impression that I need some JavaScript in there to add the attribute, but as a newbie to HTML/Java I could do with some help! Thanks, Jonathan.

Upvotes: 0

Views: 2821

Answers (1)

Joffutt4
Joffutt4

Reputation: 1458

This will go into the video object that you have created and append a unique string to the end of the source of the video.

I did add an ID to the source in the video object to allow easier access of the source object with javascript.

var video = document.getElementById("vid");
var source = document.getElementById("vidsource");
var rndString = "?t=" + Date.now();
source.src = source.src + rndString;
video.load();
<video id="vid" width="476" height="266" controls="" autoplay="">
  <source id="vidsource" src="http://mydomain.co.uk/Weather/today.mp4" new="" type="video/mp4" />Sorry, your browser does not support our time lapse video.
</video>

Upvotes: 2

Related Questions