Format Video Length in HH:MM:SS from Command Line
In my experimentation with audio and video manipulation, I've found that most tools prefer to handle time in HH:MM:SS (hour:minute:second) format. I always presumed that using seconds would be easier but I'm barely a novice media tool user, much less a tool creator.
When I wrote the Create Short Preview from Video post, I calculated the video length in seconds with the following command:
length=$(ffprobe $sourcefile -show_format 2>&1 | sed -n 's/duration=//p' | awk '{print int($0)}')]
That was helpful in detecting if a video was long enough to generate a preview for, but I then needed to get that length in HH:MM:SS format:
formattedlength=$(printf "%02d:%02d:%02d\n" $(($length/3600)) $(($length%3600/60)) $(($length%60)))
In the end you need to evaluate loads of individual statements to get your final HH:MM:SS format!
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Jack Rugile’s Favorite CodePen Demos]()
CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!
![Detect Vendor Prefix with JavaScript]()
Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work. These prefixes can be used in two formats: the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps). The awesome X-Tag project has...
