Over 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.
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
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.
 This article is authored by Partha Bhattacharya, who owns and operates this website. Apart from catering to the video needs of his clients, Partha also writes guest articles for other web publications. |
