On Web Video

When I decided I wanted to do this new show thing and do it in video, I didn’t know what I was really in for. Then as I started playing a little with video and wanted to stick a snippet on the web, I was sure I was in trouble.

This is a collection of quick notes on how I did it.

First, I grabbed some video off of my camera. Now the camera records to avi but does it in high-def, which is a little large for what I wanted, so I ran it through tablet-encode, which is an mencoder wraparound script that generates small-enough video that works on the n770/800/810 devices. This worked like a charm and a line like so: (code is all one line)

tablet-encode –preset=best -2 file.avi newshow.avi

got me an avi file that was 400×200 30fps.

Next I wanted to get that on the web and viewable. A quick look through some internet available howtos revealed that an flv (flash video file) was the way to go there. So, off I went to create flv from avi. After some serious digging I was direted, once again, back to mplayer/mencoder. (code is all one line)

mencoder -forceidx -of lavf -oac mp3lame -lameopts abr:br=56 -srate 22050 -ovc lavc -lavcopts vcodec=flv:vbitrate=250:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -vf scale=360:240 -o $1.flv $1

Then was the tricky part. I wanted to just use an embed or object statement in some html to stick that video in the page, but that would not work at all. It took me hours of looking through people’s bad documentation on the net to discern that what I really needed was a flash player in order to play flash video. Another quick search revealed the free-enough JW FLV Player.

Once you have that and get the “player-viral.swf” or flv player on your webserver and accessible, there is only one more little barrier. It’s nice to have a picture to have at the front of your video instead of a black screen (before your play the video). Once again, mplayer: (and once again, all one line)

mplayer -ss 10 -nosound -vo jpeg -frames 1 newshow.flv

Which will create an image named 000001.jpg or some such. I just renamed it to newshow.jpg.

Now with all that, I can put my flv and jpg somewhere I can get to, and do an embed statement in a webpage like so:

< embed src='player-viral.swf' width='400' height='240' bgcolor='undefined' allowscriptaccess='always' allowfullscreen='true' repeat='none' flashvars='file=newshow.flv&image=newshow.jpg' />

Obviously the lessthan sign and the embed command should go together but, alas, it will not let me post the code any other way 🙂

Leave a Reply

You must be logged in to post a comment.