Get and Set HTML5 Video Current Time
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.
![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...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![MooTools ASCII Art]()
I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous; ASCII...
![Link Nudging with CSS3 Animations]()
One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging. I've created this effect with three flavors of JavaScript: MooTools, jQuery, and even the Dojo Toolkit. Luckily CSS3 (almost) allows us to ditch...
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.