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.
SUPER would be my FLV video encoder of choice.
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:
<param name="movie" value="[Absolute path to player.swf]" />
<param name="FlashVars" value="&movie=[Absolute path to your .FLV video]">
<embed src="[Absolute path to player.swf]" flashvars="&movie=[Absolute path to your .FLV video]" width="[Width of your video]" height="[Height of your video]" type="application/x-shockwave-flash"> </embed>
</object>
Just change the following parameters:
- Use the same width and height values that your .FLV video.
- The absolute path to the SWF file with the OS FLV playback controls (example: http://www.mydomain.com/player.swf).
- The absolute path to your FLV video file (example: http://www.mydomain.com/myVideo.flv).
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:
<param name="movie" value="http://www.mydomain.com/player.swf" />
<param name="FlashVars" value="&movie=http://mydomain.com/myVideo.flv&fgcolor=0x333333&bgcolor=0x999999">
<embed src="http://www.mydomain.com/player.swf" flashvars="&movie=http://mydomain.com/myVideo.flv&fgcolor=0x333333&bgcolor=0x999999" width="640" height="480" type="application/x-shockwave-flash"> </embed>
</object>
The parameters that you should adjust are the following:
- The foreground color (fgcolor, set to 333333 in the example).
- The background color (bgcolor, set to 999999 in the example).
Conclusions
It's easy to embed your FLV videos in Blogger. You just need to convert your videos into FLV files and embed an open source video player. This technique offers many benefits:
- You can embed high-resolution video in your blog.
- As you control the compression, you can embed high-quality Flash videos.
- You can get rid of third-party watermarks in your FLV videos.
- The appearance of the video playback controls is fully customizable, so it can match the look and feel of your blog.
Take advantage of these techniques and start embedding high-quality video content in your blog!
Stumble
15 comments:
This was very helpful. Thanks!
I'm glad you found it useful! :-)
I can't get the video to play full screen. When I click on the players full screen button, nothing happens. Any ideas?
I think that you should add just the allowFullScreen param with a true value, as it defaults to false in both, the object and embed tags.
On the other hand, some browser security configurations and old Flash players may not support the fullscreen mode.
This article has more information about Flash fullscreen mode.
Great article, I’m also using video to flash encoder
it’s very simple and have step by step tutorial,it does the job perfectly for converting video to flv with flv player!
That Flash encoder seems to be pretty good too. Even with the latest YouTube video quality improvements, these fully customized Flash video embeds are worth a try.
Thank you so much for such a helpful post!
I just had problem with full screen, but after i added allowfullscreen='true' it worked!
fabulous!
It's good to hear that the fullscreen trick works too!
thanks you so much!! i have been looking for a solution like this for a long time now. thank you! thank you!
Guys This must be great
but I cant make it work
Im not sure I using the right server to upload the files
Filefactory?
Pls help
Any suggestion for playing 4 videos at the seam time, and also have a toolbar for play, stop and continue the 4 videos? It is due to the videos are synchronized. Thanks in advance.
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
Thanks so much for this write up. Exactly what I was looking for.
how can i use it in blogspot blog by hot linking the player.swf in google code? is there anyway to id smoothly?
Post a Comment