Category Archives: pea

Photoshop Elements/Album export to web gallery utility

Halfviking get’s videos (ffmpeg, convert, flvmdi, flvplayer)

I’ve always wanted my online gallery export script to handle videos and last weekend, I bit the bullet and wrote it. I used quite a few Open source projects to accomplish this which means that PEAExport has a few dependencies but I think it’s worth it. My Canon Ixus takes AVI movies. The sizes of the movies range from 1MB to 50MB. To upload these would just be silly and each viewer would have to have an AVI viewer, which probably wouldn’t load in the browser. I really like flash movies players like those found on YouTube and Google Video so I anted to find a free one to use, I found the wonderful flvplayer @ http://www.jeroenwijering.com/. It’s an excellent player and free for non-commercial use.

So at this stage, I have my Videos in AVI format and a flash video (flv) player. I need to transcode them from AVI to FLV to work with the player. In work a few weeks ago we came across the SUPER application. This is a GUI front end to FFMPEG which is an absolutely wonderful utility, It handles tens of formats and hundreds of options. I used the FFMPEG.exe bundled with SUPER to tanscode them from AVI to FLV

ffmpeg.exe -i 'video.avi' -y -ab 64 -ar 22050 -b 200 -r 25 -s 650*450 'video.flv'

The options above (full list of options):

  • -i ‘video.avi’= input file is video.avi
  • -y = overwrite existing file if it exists
  • -ab 64 = audio bitrate is 64 kbit/s
  • -ar 22050 = audio sampling rate is 22050 Hz
  • -b 200 = video bitrate is 200 kbit/s
  • -r 25 = frame rate is 25Hz
  • -s 650*450 = rame size is 650 pixels by 450 pixels (WxH)
  • ‘video.flv’ = output file

Running this converts the hefty AVI video to a lightweight (relatively) FLV video. I then need to get the flvplayer playing this newly generated FLV.

<object data=”flvplayer.swf” type=”application/x-shockwave-flash”>
<param value=”file=video.flv&image=medium.jpg&linkfromdisplay=true&link=../14″ name=”flashvars” />
<param name=”movie” value=”flvplayer.swf?file=video.flv&image=medium.jpg&linkfromdisplay=true&link=../14″ />
</object>

There are many options for the flvplayer (full list of options). I only needed a few -

  • file=video.flv = input file is video.flv
  • image=medium.jpg = the loading image before you press play is medium.jpg
  • linkfromdisplay=true = when the user clicks directly on the movie area then they will be redirected to another page
  • link=../14 = when they click on the video, they will be redirected to the relative link “../14″

This plays fine but the progressbar isn’t running, This is a known limitation of FFMPEG (it’s fixed in the SVN version), FFMPEG does not write the metadata like video length etc to the FLV file. To do this, I was able to use another free utility called FLVMDI

flvdmi.exe video.flv video.flv

Running this inserts all the required metadata into the FLV video. The progress Bar now works perfectly.

You’ll notice that in the options for the flvplayer, I included “image=medium.jpg”. I could have used any image here but I wanted to use a frame from the video. Fortunately FFMPEG can do this.

ffmpeg.exe -i 'video.avi' -y -vcodec png -vframes 1 -an -f rawvideo -s 650x450 'videoimage.png'

The options above (full list of options):

  • -i ‘video.avi’= input file is video.avi
  • -y = overwrite existing file if it exists
  • -vcodec png = force video codec to png
  • -vframes 1 = set the number of video frames to one
  • -an = disable audio
  • -f rawvideo = force format to rawvideo
  • -s 650*450 = frame size is 650 pixels by 450 pixels (WxH)
  • ‘videoimage.png’ = output file

This results in a PNG file, quite a big one, taken from the first frame of the video. The file was too big for web use so I needed to convert it to JPEG. I could have used the Python image library PIL to do this (PEAExport already uses PIL) but I was already using some command utilities utilites to create videos and images. I thought, there’s no harm in another. That other was Convert.exe from the ImageMagick Library.

convert.exe -quality 75 videoimage.png videoimage.jpg

The options above (full list of options):

  • -quality 75 = compression level set to 75%
  • videoimage.png = videoimage.png is the input file
  • videoimage.jpg = videoimage.jpg is the output file

Excellent, I now have a lightweight flv video but I want a thumbnail to display in my gallery index pages. I ran the FFMPEG fram grap command but with “-s 250×186″ to reduce the size to thumbnail size. I also want to indicate that it’s a video that the users is going to see and not another photo. So I need to Annotate it with the word “Video”

convert.exe -quality 75 -gravity South -font C:WINDOWSFontsGOTHICB.TTF -pointsize 50 -fill black -annotate +1+1 Video -fill white -annotate +0+0 Video videoimage.png videoimage.jpg

The options above (full list of options):

  • -quality 75 = compression level set to 75%
  • -gravity South = direction primitive gravitates to when annotating the image – In this case, we want the annotation loacted in the South of the image
  • -font C:\\WINDOWS\\Fonts\\GOTHICB.TTF = The font for the annotation. In this case I am using Century Gothic Bold
  • -pointsize 50 = The font size is set to 50 points
  • -fill black = The fill of the annotation is to be black
  • -annotate +1+1 Video = Annotate the word “Video” plus one pixel in both directions from the base position of “South”
  • -fill white = The fill of the next annotation is to be white
  • -annotate +0+0 Video = Annotate the word “Video” plus zero pixels in both directions from the base position of “South”
  • videoimage.png = videoimage.png is the input file
  • videoimage.jpg = videoimage.jpg is the output file

This creates a thumbnail image with the word “Video” in white with a black drop shadow, in Century Gothic Bold font, size 50 points.

thumbnail image with the word Video

And that my friends is it. Enjoy all my vidoes @ http://www.halfviking.com. I have also created a new page @ http://www.halfviking.com/videos using flvplayer’s playlist feature. My favourite single video is Bobby very bemused as to what on earth is planted in the ground at Crosby beach north of Liverpool.

Half Viking Gallery Goes Live

HalfViking.com
It’s been a while on the back burner but this weekend I went hell for leather and managed to get the necessary coding done to get Halfviking.com live.

I manage all my photos 6000+ photos in Photoshop Elements and I am very happy with how it copes but it’s web gallery export sucks ass.

What I found was that PSE stores it’s data in an Access database. I wrote (using parts and few sub routines form album2gallery) a perl script to extract the data in the DB and write it to XML.

I then wrote a wad of python to parse the XML and create a static version of the gallery you now see. Using the Python Imaging Library I also managed to resize all the images to thumbnails and larger versions. All my photos are up now…. I have nothing to hide :) .

There is still a couple of hitches (some duplicate albums [now fixed :)] and it’s not browser tested and I want to add some funky javascript) but I couldn’t be arsed waiting any longer… enjoy (or not)