How to Embed Flash Video in a Website

Adding Flash video to a website can be confusing to say the least. Many people do not understand the difference between embedding a link to a flash video into page and actually serving the video content themselves.

YouTube and other video sharing / video hosting services make it relatively simply to display flash video, but the content, in-effect, belongs to that hosting service in the eyes of Google and other search engines, and worse, the video become somewhat public domain as anyone else can simply place the same embed code into their webpage and now your unique content is as much theirs as it is yours.

To non-technical types, the answer may be “So what?“, but in the competition for traffic, your unique content, (text, images, video, audio or applications), are what makes your website different from everyone else’s — and is a key factor in how much traffic your site gets.

To serve Flash Video requires a mix of skills — minimally;

  • the ability to edit HTML
  • a basic understanding of what a Shockwave / Flash (.SWF) control does
  • a basic understanding of what a Flash Video, (.FLV) file is
  • the ability to (FTP) upload files onto your webserver.

If you are not comfortable with these four prerequisites, you should read up on them and return to this article when you are comfortable. You do not need to be able to create .SWF or .FLV files, just understand their purpose. (You will also need to know how to download and extract the contents of a .ZIP file to follow along with this tutorial).

The basic concept is that you have a webpage, (.HTML), into which you encode the proper tags to embed a Shockwave/Flash (.SWF) player which in-turn controls the display of the Flash Video (.FLV) file.

In this demonstration, we will use a readily available Shockwave / Flash Video player — Jeroen Wijering’s JW FLV Media Player. The player is free, open source for non-commercial use, (and a very reasonable $30 Euros for commercial sites).

To begin, you will want to go to the site: http://www.jeroenwijering.com/, (now called LongTail Video), and:

  1. click JW Players on the top menu
  2. then click FLV Player
  3. type in your email address
  4. check that you understand and agree to the noncommercial license
  5. then click Download
  6. when prompted, select to save the file, (mediaplayer.zip), to disk, (note the directory where you save the .ZIP file).

Once you have downloaded mediaplayer.zip, you will need to extract, (“unZIP”), the contents of the (mediaplayer.zip) archive. When you do, you will find it contains the files:

  • player.swf – this is the ShockWave / Flash player, a frame of sorts that contains the play and pause buttons, volume control, etc.
  • preview.jpg – this is a (static) image file that will appear in the player before the video is played
  • readme.html – this file contains the cut ‘n paste html code you need, along with some other instructions. (we will use the file as-is for our first test, then edit it in our second example/test).
  • swfobject.js – this is a Javascript that checks to see if the Flash plugin is installed in the remote user’s browser, and loads the player using valid XHTML markup.
  • video.flv – the video (in Flash format)
  • yt.swf – a Shockwave /Flash file needed is you want to use the player to play and control YouTube videos on your site.

We’re almost there. Without doing any editing at all, you can simply FTP to your webserver and upload all of the files. I suggest you create a directory, e.g.- /video, (a folder named “video” in the root directory of your site). Upload all the extracted files to that directory, (this will keep things organized so when you start to customize the various files, you will not end up having the needed files scattered around your webserver).

If you have created the directory, /video, and your domain name is www.example.xyz, you will want to browse the URL http://www.example.xyz/video/readme.html

If everything worked as expected, you will see the player and be able to click the play button and watch video, hosted on your site.

Now the fun begins! You probably want to see your video, not the sample. The easiest thing to do is make a short video, and name it video.flv, and upload it it to the /video directory, (overwriting the sample file that came with the player). Click the play button and you should see your video playing now.

If you notice, when the video isn’t playing, the sample intro file, (preview.jpg), is displayed. Again, we can simply create a .jpg image of our own, name it preview.jpg, and upload it, (again overwriting the sample file that came with the player).

Once you are comfortable with how the basic player works, you can dig into the documentation and experiment with all the extended capabilities.

The JW Flash Media Player isn’t your only solution, there are several others, but for the most part all work the same way, using the same types of files and configuration.

The list below will point you towards other resources for creating, embedding and watching flash video on your website.

www.WimpyPlayer.com – this is a similar player fromPlaino software. There are actaully a whole family of products including: the Wimpy Button, (a simple click to play button you embed in a web page to play an audio file, Wimpy WASP which plays one .FLV file at a time, Wimpy RAVE which allows you to configure playlists in a “jukebox” fashion so you can organize multiple audio and video files.

www.Adobe.com/flash – Adobe owns the Flash format and is the source for official flash authoring software, (they acquired MacroMedia which was the original creator of Flash). You can find out the latest news about Flash, download demo software and purchase genuine Adobe Flash software creation tools.

www.SwishZone.com – a lower cost alternative for Flash authoring software and Flash video conversion software. Their Swish Video software includes a player you can modify and “skin” to make the look of your site or create a custom flash video interface.

www.media-convert.com – free online service you can use to convert video from many other formats to .FLV, simply upload your file, set any options if you like, (e.g.- resize, frame rate, merge multiple files, etc, or just leave the defaults set), and the service converts your movie to .FLV and download it.

www.macromedia.com/go/getflashplayer – user download site to get the latest version of Flash player plugin, (note: URL redirects to an Adobe.com webpage).

http://www.martijndevisser.com/blog/flv-player/ – desktop FLV player by Martijn de Visser. This is a slick little (free) Windows (2000, XP and Vista) utility application that lets you simply open the player, then drag and drop Flash Video (.FLV) files onto it to view them.

http://www.longtailvideo.com/ – home of the JW-FLV player and other video and media tools.


Posted in Audio / Video Tagged with: , , , , , ,