Video in Blogger: embed Flash video and a Flash Video Player

Videos can be an awesome kind of content to include in your blog. Embedding YouTube videos in Blogger is very easy. However, using YouTube videos has some drawbacks:

The actual resolution of YouTube videos is limited to 320 x 240 pixels.

The video suffers from strong compression (limited to 250 kbps).

The YouTube watermark may overlap your video.

The customization of the video playback controls is limited.

The FLV video format (Flash Video) offers a great amount of compression while keeping the video quality high. So I would really suggest you to create your own Flash Videos in this FLV format, host these videos on your own webserver, and then embed the FLV video in Blogger. Follow these steps to embed high-quality videos in your blog:

Step 1 - Convert your video into FLV format

The first step is to convert your video into FLV format. Adobe Flash Editor has an Import Video function that quickly converts the original video into FLV. Nevertheless, the Flash IDE is an expensive application, so I would suggest you to use some free video encoder to turn your original video file (.avi, .mpg, .mov, ...) into FLV.

Convert your video into Flash Video and upload the resulting .FLV file to your server. Just be careful with your bandwith quota, as video content may be rather heavy.

Step 2 - Create the playback controls

Once you have a FLV video, you will need to create the playback controls, so you can play, stop and pause the video, see how much video has been preloaded, control the video volume and so on.

Flash can also create some video playback controls, but they won't be much useful, as you cannot use an absolute path to link to Flash video controls. So you cannot embed the Flash video controls directly on your blog, because you won't be able to link to the original SWF file containing the playback controls.

The solution is to use an open source FLV video player. I would recommend you to use the OS FLV Player, which is a truly open source, customizable and reliable FLV video player. And you don't need even to have the Flash Editor to use this module. You will just need to upload the file with the playing controls to your server (player.swf).

I will teach you how to configure OS FLV in the following step, so it will be easy to embed this video player in Blogger.

Step 3 - Add it to Blogger: Embed Flash Video

OS FLV Player provides some php scripts that automatically create the HTML code to embed the FLV video on your webpage. But, since we are going to host the video playback controls, as well as the FLV video on a webserver that is not in the same domain as Blogger, we will need to embed the video in Blogger by hand. This is the code that you should embed on your Blogger post to include the video:

Step 4 - Customizing the video player in your blog

You may want to adjust the look and feel of your playback controls in order to make the embedded Flash video match the style of your blog. As the OS FLV Player is an open source player, you could edit the source .FLA file by yourself (player.fla), creating a new skin for the Flash controls. However, you will need the Flash IDE to edit this source file.

There is also a very simple way to customize the colors of the elements inside the video playback controller just by tweaking a couple of parameters. Here is the sample code:

If you want to play 4 videos at the same time, then your best choice is to code your own video player using ActionScript. Such video player should control all videos, embedded on the same Flash file.

By clicking the "play" button you would be then handling the click event, and invoking the "play" function on every one of your video instances. Same would happen with "pause" and "stop."

Another reason which wouldn't involve coding in Flash would be turning your 4 videos in just 1, by using a video editor. Of course, they would have to be together in the same screen, as a square split in 4 parts.

Works brilliantly. I uploaded the files to a folder in my public folder on dropbox and also my flv file. I have got my video to auto play and it's on the main page of my website. check it out. Windows HTPC