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.
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Duplicate DeSandro’s CSS Effect]()
I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page.
![Use Custom Missing Image Graphics Using MooTools]()
Missing images on your website can make you or your business look completely amateur.
Unfortunately sometimes an image gets deleted or corrupted without your knowledge.
You'd agree with me that IE's default "red x" icon looks awful, so why not use
your own missing image graphic?
The MooTools JavaScript
Note that...
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.