How To Embed SWF, FLV, MP4 Flash Video In Your Web Page

Ever since flash video became the accepted medium to show web video in websites mainly because of smaller size – and therefore faster download – and lesser distortion, the web has seen a big rush of it. The increase in popularity of video sharing sites like Hulu, YouTube, and others bears testimony to that.

While it is easy to embed YouTube video in any website, in this article I will shift the focus a little and deal on how you can embed flash video in your web page independent of any video sharing host.

I will separately talk about embedding SWF, FLV and the now-in-vogue MP4 flash videos. Viewers may keep in mind that no flash video can or must be made in one common format for the fear of abnormal file size and/or distortion in the end product.

Thus, while SWF is good for short, low-motion flash video, FLV and MP4 should be the choice for longer, full-motion screen videos.

Embedding SWF Video

There are 2 ways to embed SWF flash video in a web page – SWFObject and Macromedia plugin. SWFObject is available free for download from Google Code page.

The html codes for both SWFObject and Macromedia plugin are as below. The full html code for embedding SWF video in web page is available here.

Code: SWF With SWFObject.JS

<script type="text/javascript" src="swfobject.js"></script>
<object width="400" height="300">
<param name="movie" value="example.swf">
<embed src="example.swf" width="400" height="300">
</embed>
</object>

Code: SWF with Macromedia Plugin

<object id="whatever" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
<param name="src" value="example.swf"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="quality" value="best"/>
<embed name="whatever" src="example.swf" width="400" height="300" bgcolor="#FFFFFF" quality="best" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>

Embedding FLV Video Using Free FLV Player

Usually, an FLV flash format is ideal for videos of longer duration having high motion in them. Camera movie is nearly always shown as FLV video in a web page, and now increasingly as MP4 video as well.

Open Source FLV player, OSFLV, is available free to embed FLV video in a web page with controls that can play/pause/stop the video.

After you download and unzip the software from the site, go to the code generator page, and fill in the form that automatically generates the necessary html code for you.

Embedding FLV & MP4 Video With JW Player

JW Player is versatile and free for non-commercial website. With JW Player you can have a FLV/MP4 flash video running in a loop without any play/pause/stop controls giving the impression of a video advertisement running.

Or, you can have various types of controls, various types of player skins, and so much more. What’s really good with JW Player is that the setup wizard [http://www.longtailvideo.com/support/jw-player-setup-wizard] lets you do all these very easily.

You can then view how the video actually plays, and if you like it, you can copy the html code given by up wizard the set for embedding the player in your webpage.

The video below explains the different ways of embedding flash movies in web page. Full html codes and other details can be had from this article on e mbedding SWF, FLV, & MP4 videos in a web page.

Comments

RSS for comments on this Hub

Sweet chilD says:
3 months ago

It is a great tutorial. There is also other way to do so. Check playerdiy.com, with it, not only you can easily add flash videos to web page, but also can make customized flash video player for your website - http://www.playerdiy.com/

words2content says:
3 months ago

Thanks, Sweet chilD.

karfes says:
3 months ago

does it mean that after embedding the swf video on the site the user wont have to install the plugin on his browser to view the movie. is the plugin automatically installed on the users browser or wat?

Sweet chilD says:
3 months ago

Adobe Flash Player browser plugin is always needed to view Flash via web browser.

You have to first install the plugin on your browser and then embed swf to web page.