Fractals and Music Visualization with FFmpeg


FFmpeg is a powerful video compression tool that has been previously talked about on this blog here. But did you know that it is also a serious video generator in it’s own right?

Lessons Learned from My First HTML5 Video implementation


I recently had the opportunity to implement an HTML5 video for a client.  It was the first time I’d really worked with HTML5 video, and I ran into a few issues and quirks I thought I’d share for other developers who run into these issues.


1. HTML5 video with a fallback to Flash works really well.  The opposite doesn’t work as well. 


At first I started implementing my video in Flash with a fallback to HTML5 – not for any special reason, but only because a previous developer had implemented another of the client’s videos that way and I followed the pattern already set.  I soon discovered that although this works fine for a video that just plays in a fairly static page, it wasn’t ideal for the kind of video I was implementing, which required some custom controls and interactions with other elements on the page.  I first thought that the best way to handle this would be with a try / catch, but since my flash took a little bit of time to load, I would often get an exception when calling a flash function, even though the flash was ultimately playable.  The real crux of the problem was that in an HTML5 to Flash fallback implementation, the flash code doesn’t even exist as far as the browser is concerned unless HTML5 is not supported – in which case the <video> tags don’t exist.  The user can only ever interact with the HTML5 video or with the Flash – never with both.  If you implement it the opposite way, BOTH Flash and HTML5 video exist on the page, potentially leading to a situation where the user is interacting with both videos.  Once I found myself writing code to catch and prevent these weird interactions, I decided this was the wrong way to go.   The HTML5 to Flash fallback is the way this code is meant to be implemented, and leads to the cleanest implementation.

Fast and slow-motion video with ffmpeg


In my last installment we looked at all the reasons why editing video isn’t as easy as it should be.  Let’s assume that we’ve cleared those hurdles, and now actually want to do some video editing from the command line.  A not-uncommon video effect is fast- and slow-motion, sped-up or slowed-down video.  Being common, you’d think it would be readily available in any video editing software, but you’d be wrong.  Out of respect for all its other virtues, we’ll be using ffmpeg today.

A quick introduction to not editing video


Pop quiz!

Given (A), (B) bux.avi, and (C) baz.m4v, which can your video software handle correctly?

  1. A
  2. A & B
  3. All of them
  4. All or some or none of them depending on their codecs, your software’s codecs, and whether they’re doing anything special with the container format.

Playing Video File from Limelight Secured URL


We worked on a project that utilized 360° panorama viewer, called PanoSalado, and ran into an issue with streaming video from Limelight, a popular CDN service.

PanoSalado renders one more more video sources by capturing the bitmaps and laying them “flat” allowing user to pan and zoom. For this project, our video source (encapsulated by a class called VideoSource) contains an instance of FLVPlayback. This is a standard Flash class for playing flv videos. To use it to play an flv file, one can simply call its load function.

Maintain Image Aspect Ratio Programmatically


The aspect ratio of an image is the ratio of its width to height, and all images have an inherent aspect ratio. By default, the <mx:Image> tag property maintainAspectRatio is set to true. This setting preserves the aspect ratio so that an image does not appear distorted.