How To Embed A FLV File Into A Web Page

Embedding A FLV File Using JW FLV Players - 3.6 (2007) and 5.1 (2010)

In this section I will show you how to embed a .flv audio/video file into your own web page. This example uses the code that comes with Flash Video Player 3.6 (found in many website builders) by Jeroen Wijering (created early 2007). That player is now called JW FLV Player (5.1 - Created in 2010), now managed by Longtail Ad Solutions (with JW still on board) and allows you to playback any video format that is supported by Adobe Flash Player. Other software examples are shown.

So why use version 3.6 when version 5.1 is more superior with updated code and features? Well, when I first wanted to embed a .flv video file into a web page I used Web Easy Professional (WEP) because it was quick and easy to do so. Upon investigation though I found out that both versions of the flv player (3.6 and 4.5 back then) were free-to-use for non-commercial purposes, with the display of a five second watermark during video playback and a right click attribution (product acknowledgement). This is still true as of 3.6 (2007) and the current 5.1 (2010).

In order to stream .flv video files through your website, from within its public_html folder, without the watermark and attribution you need to buy a commercial license for your website (currently €59, approximately £52) - This applies to JW FLV Player 5.1 and not, the now unsupported, Flash Video Player 3.6. So what has this got to do with version 3.6? Answer. Version 3.6 that comes with WEP, and other web development packages, has a licensed version (version 3.6) inside it that you can use.

At first I thought "Why have Avanquest given me version 3.6 in WEP?". And after that I asked myself "Even if Avanquest is licensed to put the player in their package, what good is that if the user (me) can only view .flv video on their computer but not on their website?". I do not want to pay for another software (the flv player/license) now that I have bought WEP. So I decided to ask LongTail for the facts.....using a bogus email address of course!

Always use a bogus email address when making general enquiries because some companies take it upon themselves to abuse your email address otherwise. Longtail have not abused my bogus email address. In fact, Ethan Feldman was very professional. Anyway. To cut the story short, Ethan Feldman (Ad Solution Manager) told me (SarahP actually) that I was free to use my licensed, non-branded, version 3.6.

So basically the purchaser of WEP, and any other web development package using version 3.6, is licensed to use version 3.6 on their website. And the same would apply if that web development package was using version 4.5, but always check with LongTail or whoever first if you are in doubt. I have put the email conversation between me (bogus SarahP) and Ethan Feldman at the bottom of this section for you.

THE EXAMPLE

In this example I have used a modern-day .flv video recording, with Adobe Flash Player 10.0.45.2 (and Adobe Shockwave Player 11.5.6.606) installed, using Flash Video Player 3.6 by Jeroen Wijering to show you that you do not necessarily need all the features of version 5.1 for example to play a simple .flv video file. Saying this, I have given example code of 5.1 at the bottom of this section.

The files produced by the WEP web development software consist of four main files. 1) The web page that is to play the .flv video file. 2) The javascript (i.e. video.js) file that collects variables passed to it by the web page, which in turn it passes to the .swf file. 3) The .swf (Shockwave Flash/Small Web Format) file itself that interacts with Adobe Flash Player in order to display the .flv video file. And 4) The .flv video file.  In Fig 1.0 below I have cut the web page code down to its minimum.

Fig 1.0  The two segments of html code needed to play a .flv video file

Fig 1.0 above highlights the segment of code (highlight 2) that executes (runs/launches) the javascript code (highlight 1). The script tag (command/instruction) in highlight 1 simply tells your web browser to insert the external video.js javascript code into memory, where its weAddFlashVideo() function (instructions) can then be executed by the html code in highlight 2.

The weAddFlashVideo() function requires certain parameters to be passed (given) to it, such as the video size parameters (320, 240), before it then passes those same parameters to the flvplayer.swf file (video player). For example. I have told the weAddFlashVideo() function I want the .flv video to be displayed at a size of 320 pixels wide by 240 pixels high. When the weAddFlashVideo() function is executed, with my size parameters, it then executes the flvplayer.swf file which receives those same size parameters which Adobe Flash Player then reads and display the .flv video file accordingly.

Although the video.js code could of been incorporated into the play_video.html web page it was not, simply because you never know when you are going to need that same video.js code again. For example. With one web page it does not matter if you incorporate it or not, unless you really want to save on code (i.e. have all code in one file).

In general though; when you have more than one web page using the same video.js javascript code, because each web page is going to play the same flv video for example, you normally just link to the same video.js file (with the same code inside it) using a SCRIPT tag. You would never have ten web pages that all have the same video.js javascript code inside them. You would have each web page linking to the same video.js file instead.

Fig 1.1  The javascript code with the actual weAddFlashVideo() function inside it

You can ignore the video.js file because there is nothing inside its code for you to touch or worry about. As said above, you just incorporate it into memory (link to it) via a SCRIPT tag. Looking at the video.js code you can see how the parameters for the weAddFlashVideo() function are made up.

Fig 1.2  The effects of changing the colour parameters

Fig 1.2 above shows the effect of changing the colour parameters, which must be in the HexDecimal number format as far as I am aware. Notice there is no watermark obstructing the video footage, a part from the watermark/timer that I purposely wanted from my webcam. If I right click over the video footage the right click attribution (author/company acknowledgement) will be there, but you know what they say. "What the eyes don't see the heart won't miss!".

Below is a copy of the email conversation I (bogus SarahP) had with Ethan Feldman (Ad Solutions Manager), with all replies. Read It from the bottom upwards because that is where hotmail displays the original email message from. It should give you a definite understanding of who can use the player.

Fig 1.3  A Copy of the conversation I had (SarahP had) with Ethan Feldman (Ad Solutions Manager)

The code for JW FLV Player 5.1 uses a more traditional/standard embedding code. It is a lot different from 3.6 but is more standard. I do not need to explain it here as it is well covered on the JW Player website and in their forum. One thing to note here though is that the JW Player website tends to focus too much on SWF flash files than FLV files, so you have to hunt down code dealing with FLV in their forum.

Embed Code For JW Player 5.1

Fig 1.4  This JW Player 5.1 code will play a .flv video file on your website

JW Player 5.1 has fixed many bugs (code errors/mistakes) since 3.6. So if you can afford the commercial license of version 5.1, and if you require a commercial license of course, then I would suggest you buy one and use version 5.1. However. If you only need to play the odd .flv video on your website, without a watermark but with right click attribution, I would suggest hunting down a cheap web development software that comes with a license already. You might even find this in a Demo or 30 Day Trial?

Files You Need To Copy To Your Website

Once you have downloaded, and unzipped, JW Player 5.1 you need to copy the following files from that distribution into your public_html folder (or a sub-folder within it).

These next files are only needed if you are using Flash Video (JW) Player version 3.6, from a website builder package for example.

These next files are only needed if you are using Flow Player 3.1.

This is what the minimum web page should look like:

Fig 1.5  A minimal web page to play a .flv video file with Flow Player 3.1

There are many flv players out there, but at the end of the day they may cost you money and/or having branding on them. So really it is a matter of how professioanl you want your website to be. You get what you pay for as "they say".