syncing a video position with system time

Question

I just started working with html5 & co. (not a bloody beginner, but it's been some time..) and I need some advice for creating my project.

Setup: I have a 24 hours video, which should be displayed in fullscreen on a html site (offline usage only). If you open the html file, the video should automatically start at the corresponding video position - synced to the system time ( for example: 1.30am = 1.30h in the video-timeline).

An online example could be the 24hoursofhappy website, if you open it, the video starts at the synced system time position.

Could you guys help me out? I have no clue how to achieve this :/

Answer 1

You can set the currentTime attribute to jump to the part that you want in the video:

Returns the current playback position, in seconds.

Can be set, to seek to the given time.

For example, this video will start at the second 30:

var v = document.getElementById("myvideo");
v.currentTime = 30;
v.play();

<video id="myvideo" src="http://media.w3.org/2010/05/sintel/trailer.mp4" width="320" controls loop></video>

In your case, you'll have a 24-hour video, so you'll need to calculate the position depending on the time of the day (and remember that currentTime works in seconds). It should be easy anyway; something like this should do:

var d = new Date();
var v = document.getElementById("myvideo");
v.currentTime = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
v.play();