Get and Set HTML5 Video Current Time

By  on  

Last week I explored how you could get the duration of a HTML5 video.  It's an important technique, obviously, but one that may be a bit more important is managing the video's time setting.  Both setting and getting the video's time is important when creating a chrome around the video, so let's review how to accomplish this feat.

The first and probably most important part of managing video time state is knowing that video currentTime is the important attribute.  You can retrieve the video's current time with the following:

// https://www.youtube.com/watch?v=Cwkej79U3ek
console.log(video.currentTime);  // 25.431747

currentTime acts as both a getter and a setter, so you can move about the video by setting a value to currentTime:

video.currentTime = 0; // Restart

The API is easy enough and the property is self-explanatory.  You'll still need to do the "second" math to interpret the time, both inward and outward, but the second unit is as fair as you could expect, so this API is one to be appreciated.

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Incredible Demos

  • By
    QuickBoxes for Dojo

    Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin...

  • By
    Six Degrees of Kevin Bacon Using MooTools 1.2

    As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and useless movie trivia so naturally I'm...

Discussion

  1. Yeah, it would be nice if it worked as expected.
    On mobile browsers i.e., any glitch in network/video makes video stop while currentTime property continues advancing, making it unusable and unreliable unless countless per-browser workarounds are set.
    Also changing orientation makes video pause, while currentTime continues running losing any reliability.
    Too bad. All those html5 tags are fantastic on paper, in reality they are unusable, unless wasting hours fixing per-browser/device bugs and uniquenesses.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!