Embedding SWF, FLV, & MP4 Videos In A Webpage

Step-By-Step Guide To Start E-Learning Website In WordPress With Free ToolsOver the time embedding flash video in a webpage has assumed 2 distinct variations, namely with or without a control player.

Even though the main flash movie comes in 3 formats, the control player and its skin, if needed, both come as SWF files.

Embedding a SWF flash video is not difficult. One of the ways is to just use the SWFObject JavaScript file which is called before the embedded SWF file is encountered by the browser.

A second way to embed SWF flash video is by making use of Macromedia flash plugin.

However, if you are to embed FLV or MP4 videos, it is not possible to do ‘only’ with SWFObject. You’ll need something more. We will come to this later.

The video tutorial on how to embed the swf, flv, and mp4 files is here. It is thereafter followed by detail instructions including full html code for each case. Readers may be interested to know how to embed video in PowerPoint slide, which incidentally is also not much difficult to do.

 

 

 

Embedding SWF Video – 1

SWFObject is available free, and you can download the latest version from the Google Code site.

The code for embedding a SWF flash video with SWFObject can be as under:

<html><head>

<title>Embed SWF With SWFObject</title>

<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>
<center>

<h1>Embed SWF With SWFObject</h1>

<object width="400" height="300">
<param name="movie" value="example.swf">
<embed src="example.swf" width="400" height="300">
</embed>
</object>

</center>
</body>
</html>

 

Embedding SWF Video – 2

If you do not prefer using SWFObject, then the code to embed a SWF flash video can be like this:

<html><head>

<title>Embed SWF Without SWFObject</title>

</head>

<body>
<center>

<h1>Embed SWF Without SWFObject</h1>

<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>

</center>
</body>
</html>

Notice we are calling the Macromedia flash plugin to play the SWF file instead of the SWFObject JavaScript in the earlier example. Here the OBJECT and EMBED tags are meant for different browsers for the video’s smooth operation.

If you wish, you may include the video parameters like loop, quality, bgcolor, etc. for the SWFObject embedding as well.

 

Embedding FLV Video

We’ve said above that SWFObject JavaScript alone is not able to play a FLV video. To make things easy for embedding FLV video with or without controlbar let us look at 2 methods, one free, the other semi-free.

 

Free Open Source FLV Player

OSFLV is open source embeddable FLV player, and free. Using OSFLV is not difficult.

After you download and unzip the software from the site, go to the code generator page. It’s pretty straight-forward there.

You need to fill up the form for the code to be generated. For my FLV video named ‘example.flv’ of dimension 320×240 pixels and chosen colors of controlbar, I have the code generated as given below.

<html><head>

<title>Embedding FLV Video With OSFLV</title>

</head>

<center>

<h1>Embedding FLV Video With OSFLV</h1>

<script src='AC_RunActiveContent.js' language='javascript'></script>
<!-- saved from url=(0013)about:internet -->
<script language='javascript'>
 AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '320', 'height', '240', 'src', ((!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0)) ? 'player8' : 'player'), 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'id', 'flvPlayer', 'allowFullScreen', 'true', 'movie', ((!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0)) ? 'player8' : 'player'), 'FlashVars', 'movie=example.flv&bgcolor=0x9999FF&fgcolor=0x13ABEC&volume=&autoload=on&autorewind=on&clickurl=&clicktarget=');
</script>
<noscript>
<object width='320' height='240' id='flvPlayer'>
<param name='allowFullScreen' value='true'>
<param name='movie' value='player.swf?movie=example.flv&bgcolor=0x9999FF&fgcolor=0x13ABEC&volume=&autoload=on&autorewind=on&clickurl=&clicktarget='>
<embed src='player.swf?movie=example.flv&bgcolor=0x9999FF&fgcolor=0x13ABEC&volume=&autoload=on&autorewind=on&clickurl=&clicktarget=' width='320' height='240' allowFullScreen='true' type='application/x-shockwave-flash'>
</object>
</noscript>


</center>


</body>
</html>

Notice there are 3 files mentioned in the code. 2 of them – ‘AC_RunActiveContent.js’ and ‘player.swf’ – come with the software you have to download, and then upload to your server. They run the flash video and the control-player respectively.

The third file is the FLV flash video, ‘example.flv’. The above code uses the Macromedia plugin to operate the flash video as in the second example of SWF video above.

 

Semi-Free JW Player

I use the phrase ‘semi-free’ because LongTail Video’s JW PLayer is free for non-commercial use. For commercial website a license has to be purchased at a reasonable cost. Among other things LongTail Video also provides free and paid player skins that are very useful.

There is a setup wizard at JW Player which is easy to use and like the above free OSFLV player, gives ready-to-embed html code.

Here is a sample code (the portion in blue) I generated for my ‘example.flv’ flash video.

<html><head>

<title>Embedding FLV Video With JW Player</title>

</head>

<center>


<h1>Embedding FLV Video With JW Player</h1>

<script type="text/javascript" src="swfobject.js"></script>

<div id="player">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','320','240','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=example.flv&dock=false&autostart=true&displayclick=none&repeat=always&stretching=none');
so.write('player');
</script>


</center>


</body>
</html>

The JW Player uses the SWFObject JavaScript file instead of the Macromedia plugin, and the code appears quite clean. Here too, apart from ‘swfobject.js’ file you need the JW Player’s proprietary ‘player.swf’ file to run the FLV flash video.

You can set the JW Player so as to make the FLV video run in loop, and not to have any controlbar to control the video. In that case the video will appear just like a looping flash file.

Watch the video below to know how you can do that.

DVDVideoSoft is yet another free tool to run FLV video with controlbar. We may have a video tutorial on this later.

 

Embedding MP4 Video

MP4 is considered as a vast improvement upon both SWF and FLV formats in terms of quality of the end video and controlling the size.

Nearly all demonstrative videos shown in 2WebVideo website are in MP4, and in fact YouTube too suggests using this format for uploading videos there.

If you are also making videos in MP4 without a control player, you can either display it using one like the JW Player above in the same way as FLV video.

Or, you may upload the video to YouTube or Vimeo, and then use the embed code from there to use in your site. Vimeo for example provides very clean end result, and if you do not want their logo in the embedded video, just think of opting for Vimeo Plus.


Update

June 26, 2010 – Recently, in a symposium, I was asked what is the best and the easiest method to embed video in a webpage. I promptly replied, it is your own or others’ YouTube videos. That set me thinking along the lines I’m going to briefly elaborate now.

Well, YouTube is surely the destination for any web video maker. It’s not only the top video sharing site, it’s also emerging as – would you believe! – a popular search engine. What this means that when you have your video uploaded to YouTube, it has a good possibility of getting more viewers in a short time. This is something not possible for a video with standalone player in your webpage.

When you have your video uploaded to YouTube, you can very easily embed it in your webpage. That makes more sense because of late YouTube’s improved technology renders your video with good viewing. Just ensure that the video you upload to YouTube has a 16:9 resolution so as to avoid black patches on either side of the rendered video.

Update

March 5, 2010 – If you wish to have a flash video player with play/pause/stop controls you may opt for the free edition Flowplayer, arguably one of the best of its type, or the JW Player from LongTail Video. Also, we at 2WebVideo routinely make flash video with video player complete with play/pause/stop controls for our clients. Click here for more.

  • http://bluetooth-car-radio.info Johnny Huemmer

    Hello,I find out that your web log is really beneficial and helpful and we wonder if there is really a possibility of acquiring More articles or blog posts like this on your website. If you willing to support us out, we would be willing to compensate you… Best regards, Johnny Huemmer

  • http://tattoo7fish.bravejournal.com Rikki Hudspeth

    Thanks for taking time to share this. It’s challenging to find stuffs both free of charge as well as helpful like this guide.

  • http://watchmoviezz.com Lenard Katowicz

    I actually came across this site by doing a search for movies to watch Online. Can you make an article on the top movies to see online thx

  • http://www.shower-radio.net Millie Wood

    i am looking for a really inexpensive mp4 player, which one do you suggest?~;;

  • http://www.netCommercial.net Netcommercial

    Thanks for the detailed post in reference to flash players and mp4 I think this is why the screen goes black when uploading a mp4 in wordpress. The WordPress site offers to embed an FLV yet when done with an mp4 you get sound and no video or picture.
    I think you resolved this by letting us know it is a missing a codec in WordPress’s Plug-in’s–I use Vipers video tags for my plug in. But I must use Youtube to get the video (only mp4′s) to show picture instead of using WordPress’s embeded video player.
    I think that is the Java command that is missing in Worpress or Vipers or JW’s player?
    The same Mp4 plays fine via Youtube— or using a my own ‘stand-alone’ FLV player but won;t using an embeded JW flash player for an Mp4 file.
    Email me if you have something further to share please.
    Thanks for good input on the net
    “When they’re Surfing the Net and you don’t want them to forget!”
    http://www.netcommercial.net

  • http://www.webbee.com.au ozibite

    Thanks for the nice article. This is great.

  • http://jwplayer.co/cms-solution/ Jessi

    Thanks for the Great article!! I need for this informations..These informations are very useful in my jw player website…

  • David

    I am trying to embed a swf video but it cannot embed the Skin that came with the video (the skin for play stop and seek)