The online JW Player Wizard takes out the complications of hosting your own flash videos. Although flash is the most common ways to embed videos on the web, it is one of the more difficult formats to setup. TheJW Wizard is a contextual editor for creating and modifying the embed source code for the open source JW FLV Media Player. With the online wizard you can easily customize the player's different configurations and overall appearance.

Getting Started

The JW Wizard is located at http://www.jeroenwijering.com/?page=wizard

1) Selecting an Example setup

The JW Media Player does a lot more than just play a single video file and the JW Wizard offers many different default configurations to choose from. The most common setup using the JW Media Player is usually a custom setup, so lets just select the "flvplayer with a single video" example and walk through all the different options available.

2) Embed parameters settings

Under the "Embed parameters" link , you can choose the size of your video player and where the video player file is located. Note that the "source" field is not the file to your video, but the file to the JW video player itself, which happens to be a .swf file. To download the JW player go to http://www.jeroenwijering.com/?item=JW_FLV_Media_Player. You will need to upload the player.swf file to your website. For example, if you uploaded the player.swf file to the route directory of your website, then in the source box of the JW Wizard you would type in the following: http://mysite.com/flvplayer.swf .

3) File properties settings

Under the "File properties" the main fields that you want to look out for are the "file" field and the "image" field. The file field is the location of where the video is located. It is also important to note the different video formats that are compatible with the JW FLV Media Player. The most common flash video format is FLV (which is encoded with the VP6 codec), but since flash player 9 (version 10 was just released) you can stream h.264 videos (.mp4) with flash. The JW Player also supports the playback of WMV video files, so it is a very versatile tool for online video playback.

If you uploaded your video to your website under a folder call "videos" then your "file" field link should be something like http://mysite.com/videos/myvideo.flv . The "image" field comes in handy when you want an image to be displayed before the video is played (usually refereed to as a "poster image"). Sites like YouTube and Vimeo all use frames taken from the videos as their poster images. In the image field you would put something similar to http://mysite.com/videos/myvideo_image.jpg .

When ever you want to check to see if your changes took effect you can scroll down and click the "update and preview code" button to see how your new settings worked out.

4) Customizing the player

The rest of the links are for customizing how the player looks and how it functions. The color section is pretty basic, your able to change the color to the background and video controller bar. An important feature under the "Layout" section is the position of the control bar. If you change the position of the control bar to "over", the video control bar now moves into the video frame itself as a semi-transparent item (much like the Vimeo player).

Example Video

The Behavior section allows you control some of the default playing features. Here you can identify if you want the player to auto start, repeat playback, and much more. You can even identify the buffer length of your video if you think the default buffer length is to short or to long.

5) Embedding the player

By clicking the "update preview and code" button, the JW Wizard generates the embed code with all your settings you just made. An important item to notice are the two different embed options available. By defualt, the JW Wizard assumes that you want to embed you video using the swfobject approach. Compared to the "embed" approach, the swfobject is the better method to embed your video, but there are a few extra steps involved.

To embed your video using swfobject

You will need to first upload the swfobject.js file that comes with the FLV Media Player download (http://www.jeroenwijering.com/?item=JW_FLV_Media_Player). I recommend uploading the player.swf and swfobject.js files into a folder called "embed" under your route directory of your website.

The next step is to add the link to the swfobject.js file in your webpage source code. Copy and paste the very first line of code from the JW Wizard in between the <head> and </head> tags of your webpage's html code. The could should look like

<head>
<script src="http://mysite.com/embed/swfobject.js" type="text/javascript"></script>
</head>

Make sure you change the path of the "/embed/swfobject.js" if you uploaded it to another folder.

The next step is to copy the rest of the code from the JW Wizard (excluding the first line) and past it into your webpage where you want your video to be.

A very important note when embedding more than one video on a single page while using the swf object method. There are two instances in the JW Wizard code where the text "preview" appears, one on the second line of code and another on the second to last line of code. If you are going to embed a two or more videos in a page you will need to change the "preview" text to something unique for each video. For example, your second video could have the text "preview2" while your third video has the text "preview3."

Code Example

<div id="player2">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://mysite.com/embed/player.swf','mpl','480','270','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=http://mysite.com/videos/awesomevideo.flv&image=http://mysite.com/videos/awesome_thumb.jpg&backcolor=000000&frontcolor=FFFFFF&controlbar=over');
so.write('player2');
</script>
 
<div id="player1">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://mysite.com/embed/player.swf','mpl','480','270','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=http://mysite.com/videos/awesomevideo.flv&image=http://mysite.com/videos/awesome_thumb.jpg&backcolor=000000&frontcolor=FFFFFF&controlbar=over');
so.write('player1');
</script>

This is important because the swfobject.js file looks for the corresponding DIV ID's to embed the video and if there are more then one with the same name it will break the function.

Embedding your video using the embed code

The easier method to embed a video is using "the embed code." The reason why this method is not preferred is because the <embed> is considered HTML or XHTML valid. This use to be a bigger issue with previous versions of Internet Explorer because a user who visited a page with a video in the embed code would first be forced to activate the swf object by clicking on it and then have to re-click to play it. But with the current version of Internet Explorer (7) this is no longer in effect, and more then often the embed tag is much easier to use.

To embed a flash video using the "embed" tag method, click on the "the embed code" link in the JW Wizard, and copy and past the generated code into your web page.

<embed
src="http://mysite.com/embed/player.swf"
width="470"
height="320"
bgcolor="undefined"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=http://mysite.com/videos/awesomevideo.flv"
/>