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
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • 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...

Incredible Demos

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

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!