Sunday, September 24, 2006

Flash Videos

Introduction

With broadband and cheap hosting space available, it's now the norm to have videos on your website. Sites such as utube host videos for you. But how do you get your video directly onto your own website?

Video Formats

There are many different video formats available; for example MPEG, AVI, DivX and MOV. However, browsers don't support these formats themselves, so the video usually opens in another program such as WinAmp, RealPlayer or Windows Media Player. To allow browsers to run a video within the page, I find that streaming the video as a Flash movie is best.

Flash Movies

  1. If your video is already on DVD, then rip it onto your PC's hard-drive. For this I used DVDDecrypter. This exports the video as an .IFO and a .VOB file. Otherwise, export the video from your video editing software (eg iMovie) as a DVD image file (.img) and use MagicISO to extract the .VOB file.
  2. Use AutoGK to convert this to an .AVI format. The input file is the .IFO, and I left most settings at default, with a 75% quality. This gives you an .AVI file with an XviD codec which will be potentially hundreds of MB.
  3. The final stage is to convert this .AVI file to a .FLV. Use Adobe (nee Macromedia) Flash 8 Video Encoder. You can download a trial version from Adobe. You can also use the free Riva FLV Encoder.

Add Video to Web Page

Now you will need a flash-based video player. The best one I found was this one. Then upload the SWF files to your webserver, and add the following code to your html:

<object type="application/x-shockwave-flash" width="320" height="261" wmode="transparent" data="flvplayer.swf?file=video.flv&autoStart=false"> <param name="movie" value="flvplayer.swf?file=video.flv&autoStart=false" /> <param name="wmode" value="transparent" /> </object>

The height is 261 rather than 240 to allow for the control bar at the bottom of the movie. The flvplayer.swf is the name of the flash player, and the name of the movie (in this case video.flv) to play is passed to it. Put these files in the same directory on your webserver, and you should be good to go.

0 Comments:

Post a Comment

<< Home