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.
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![HTML5 Input Types Alternative]()
As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you
start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...
![MooTools PulseFade Plugin]()
I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery.
The MooTools JavaScript
Options of the class include:
min: (defaults to .5) the...
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.