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
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Optimize Your Links For Print Using CSS — Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great 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!