I would like to save the position of HTML5 video's currentTime to the database when user leaves a web page. It seems like window.onbeforeunload is not a reliable way to do it (not to mention it gives an undesirable popup window!). Is there a better way to do this?

I can't think of anything other than saving the position to the server periodically. But that seems wasteful resource/bandwidth wise. Netflix seems to do a good job at remembering your last viewed position. How would they be able to achieve that reliably? Low-level server-side C/C++ code maybe?

I would like to save the position of HTML5 video's currentTime to the database when user leaves a web page. It seems like window.onbeforeunload is not a reliable way to do it (not to mention it gives an undesirable popup window!). Is there a better way to do this?

I can't think of anything other than saving the position to the server periodically. But that seems wasteful resource/bandwidth wise. Netflix seems to do a good job at remembering your last viewed position. How would they be able to achieve that reliably? Low-level server-side C/C++ code maybe?

• javascript
• html
• ajax
• html5-video
• dom-events

• Is there a way around the database? Do you need the position on multiple sites or would a domain cookie/localStorage suffice?If you really need the db, you could save the position every 15 seconds or so. The payload is not that big if you just transmit an id and timecode. It could be a burden however if you have lots of cookis on your domain (which are sent with every request). – Torsten Walter Commented Jul 27, 2012 at 8:53
• It's on a site I have full control over with all the videos hosted there. No multi-site issue; thus localStorage/cookie is good enough. This is for analytic reasons (at which point are people most likely to bounce out of a particular video... etc). Perhaps I don't need the exact spot where users leave. Sampling over a big enough collection should give me a rough idea. I'll try saving every 10-15 sec and see how the backend handles that. Please amend the above suggestion and I will mark it as "answered". Thanks. – poweratom Commented Jul 27, 2012 at 9:59
• I updated my answer. Cookie sounds like a good solution for you then. Save the current time and update the satatistics on subsequent visits. You could also use google analytics to track a custom event that includes this data. – Torsten Walter Commented Jul 27, 2012 at 11:56

1 Answer 1

There are various ways to save such things:

Locally (for the same domain)

beforeunload

This gives you the possibility to cancel the unload event if you desire. However, the popup is optional.

unload

This event can't be cancelled but you still have full access to all nodes and JavaScript variables. So you can do final cleanup/save then if canceling is not wanted. You can use whichever saving method you like, e.g. document.cookie or window.localStorage.

window.onunload = function () {
    window.localstorage[myVideo.currentTime] = document.getElementById("myVid").currentTime;
}

If you can handle the fact that you can only process cookies and localStorage when the user es back to your site. I think this approach would be perfect. You simply save the current time and on the users next visit you'll get the updated information.

On the Backend

If you really need to save that information to your backend you can try some other things.

DB polling

Depending on you accuracy needs you could send an ajax request every 10 - 20 seconds to update the playback time. If you just include the video id and current time, the request is so small it shouldn't have an effect on performance. However keep in mind that if you have lots of domain cookies it might increase the size of requests tremendously and your 500 byte payload might e with a 5kB header.