Posts tagged web

Web Video

I’ve been experimenting with video codecs and formats for uploading video to the web (Facebook, Youtube, etc.).

Encoding for the Web

To make a tiny file, you can encode files this way:

ffmpeg -i foo.dv foo.mp4

For better quality output, there are a number of variables you can control. I’m starting with two assumptions for the time being: I’m using the h264 codec and my target output format is mp4. For YouTube, flv would be better.

ffmpeg -i foo.dv -ab 128k -ar 44100 -b 1200k -vc h264 -qscale 1 -s 480×360 foo.mp4

“-i foo.dv” just identifies the input file, and the rest of the options apply to the output file.

For my own future benefit, I will break down the options I’ve used: “-ab 128k” is the audio bitrate, “-ar 44100″ is the audio sampling frequency (44100 is the default anyhow); “-b 1200k” is the video bitrate; “-vc h264″ is the video codec; “-qscale 1″ sets the video quantizer scale (lower is better quality, use “-sameq” for the same quality); “-s 480×360″ is the target width and height. All of these variables can be changed to create a higher/lower quality file which is smaller/larger in size. These settings create a decent output file for people to download, but it will be resampled on uploading to websites for streaming.


If you just want to do a quick trim of the clip before uploading, I’ve found this is an easy way to do it. First play the video:

mplayer -osdlevel 3 -menu -loop 0 -dr -ni -framedrop -autosync 30 -msglevel all=0 -really-quiet -nolirc foo.dv

Note the start and end points you want, then run the ffmpeg command with “-ss NN” for the starting point in seconds and “-t NN” for the duration. That allows you to trim either the start or end of the clip without having to break out Cinelerra or Kino. By the way, I’ve got a pile of switches enabled on mplayer, but the only one that really matters is “-osdlevel 3″ so you can see the counter.

Some Youtube guidance on formats here:

Facebook format details are found here. You could use this command and vary the qscale and bitrate to get a reasonable file size:

ffmpeg -i foo.dv -acodec libfaac -ab 128k -b 1200k -vc h264 -qscale 6 foo.mp4

Vimeo format recommendations give specific values for bit rates and codecs as follows for high quality:

ffmpeg -i foo.dv -acodec libfaac -ab 320k -b 2000k -vc h264 -sameq foo.mp4

For HD video on Vimeo:

ffmpeg -i foo.m2t -acodec libfaac -ab 320k -b 3000k -vc h264 -sameq -s hd720 foo.mp4

“-s hd720″ tells ffmpeg to create 1280×720 output.

Sources of Information

This video is a good ffmpeg intro:

For Youtube uploads, they use the following command. The presenter explains that these parameters are good for Youtube because they will not be re-encoded on upload:

ffmpeg -i -ar 22050 -acodec libmp3lame -ab 32k -r 25 -s 320×240 -vcodec flv -qscale 9.5 foo.flv

He also shows how to crop and letterbox using ffmpeg and even creates a moving spotlight. He also uses the “-loop_input” ffmpeg switch in order to make a 10 second clip of a still frame. Very handy!

ffmpeg -loop_input -i still.png -t 10 -r 29.97 -qscale 2 extendedstill.mpg

Here is an explanation of how to use ffmpeg for screencasting.

Checking CSS for Errors

I just spent an hour or so struggling with some changes to the CSS of this site. I just couldn’t get my changes to show up in a browser. Finally, I ran my CSS through CSSCheck and discovered that my last definition ended with a ) (right parentheses) rather than a } (right brace).  Apparently, CSS doesn’t care if you close your last statement incorrectly, but, of course, when you add a new definition at the end, CSS ignores it completely.

Agave – A Handy Web Design Tool

Exploring Ubuntu Studio, I discovered a utility I’ve never seen before.

Agave is, among other things, a handy program for finding harmonious new colour schemes you can use on web pages.

I used it to choose the colours for the parent page of this site — Kevin Kennedy’s Web Portal — and I love the results (YMMV).