Influxis Flash Media Interactive Server 3.5 Hosting Specialists

The JW FLV Media Player, created by Jeroen Wijering (http://www.jeroenwijering.com) is a powerful tool that can be used not only to play back videos, but to create a rich user experience, add advertisements to content, monetize videos, and give a creative webmaster total control over the video interface. The player is fully compatible with Influxis, so you can use it with your existing account, with no changes needed.

In this article, I will explore some of the various things that can be done with the JW Player, including some cool things that have been requested by our customers.

First we’ll start out with the main Wizard page, which is the easiest place for anyone new to the JW Player to get started.

You will want to switch your Example Setup to “Mediaplayer with an RTMP Stream” first and foremost.

The key parts here are the “file” and “id” fields. In the “file” field place your RTMP path where your videos are located. You can find your RTMP path on the top of your Influxis Wizard. Using “tezpua38ghnm.rtmphost.com” as an example, and “VideoTutorials” as the directory name, I have pointed the “file” field to my test account.

This looks like:

“rtmp://tezpua38ghnm.rtmphost.com/VideoTutorials”.

Next, fill out the “id” field with your video name. I’ve chosen “spiderman” which is a trailer for the movie Spiderman 3. Note that the actual video name is “spiderman.flv,” but if you are playing an flv file, you do not need to include the file extension. I also changed the width and height of the player to 640×480, so the video would be bigger.

The remaining Flashvars in the Wizard are mostly just details, and are out of the scope of this article. If you wish to learn more about them, please refer to: Supported Flashvars

And here’s what your final player should look like in the Wizard:

Let’s get started on some really cool stuff. First, we will make a player that allows for certain items to be defined as “commercials,” which cannot be skipped or fast-forwarded. For this part of the tutorial, we will not be using something generated by the Wizard. Please download the files at this link in order to follow this tutorial:

Sample Player Files

Note that this example WILL need to be modified to fit into your own webpage, it’s designed with only a blank white page in mind, so you’ll need to play with it to get it to fit wherever you will be putting it. Sounds like a job for the guy over there in the really dark corner hunched over a Mac, I mean the web designer!

The first thing I would do is modify how you want the playlist to show up in relation to the video. Open up mediaplayer.html. You will notice at the very beginning of the mediaplayer.html file, we have some CSS code. Here’s the important part:

div.playercontainer
{
position: absolute;
top: 200px;
left: 200px;
width: 700px;
height: 320px;
border: 2px;
padding: 2px;
border-style: solid;
border-color: #223344;
z-index: 100;
}

div.player
{
position: absolute;
top: 200px;
left: 200px;
width: 700px;
height: 320px;
}
The “width” and “height” fields can be changed to whatever size you want the overall container to be in your website. If you’re going to use this CSS, I might also recommend changing the positions to relative, or adjusting them to fit your website.

In order to change the required flashvars (player settings), find the section that starts with “var flashvars =”, it will be enclosed between { and }. Here you can modify the size of the player, the colors, etc. You’re going to want to edit these flashvars:

width: ‘700′,
height: ‘320′,
displaywidth: ‘550′,
displayheight: ‘300′,

You want “width” and “height” to match the width and height of the CSS tags we explored above. If you don’t do this, you’ll see some funky looking white space. To change the size of the playlist, change “displaywidth.” Make the value higher to make the video take up more of the room (remember, we have allowed 700 pixels of width in the CSS tags). This will make the playlist narrower. I would leave “displayheight” alone, unless you want to increase it and make your control bar hover over the video, or decrease it to add whitespace on the bottom of the player window.

Next, let’s look at a couple more Flashvars. You’ll notice that the “file” field is changed to playlist.xml. This is because we’re going to use an XML playlist to define the videos that we want to play, further along in this article.

If you want to place a logo over your video, you can easily link to an image file. The example mediaplayer.html file already includes a place to set up your logo. To add a logo, go to the Flashvars section of the mediaplayer.html page and find

logo: ‘ ‘,

In between the ‘ ‘, add the link to whatever logo you’ll be using, such as ‘http://www.yoursite.com/logo.jpg”. That’s all! Now you will have a logo over the player.

You can refer back to the Flashvar reference I linked earlier to find out more about what these variables can do for you. Other than these Flashvars, I wouldn’t touch anything inside the file unless you know what you’re doing.

Next, let’s open up the playlist.xml file to start editing our playlist (I know, finally!). This is where we will define where the videos come from, and what videos to play.

In the example, our playlist.xml file looks like this:

<?xml version=’1.0′ encoding=’UTF-8′?>
<playlist version=’1′ xmlns=’http://xspf.org/ns/0/’>
<trackList>
<track>
<title>Test 1</title>
<location>rtmp://tezpua38ghnm.rtmphost.com/VideoTutorials</location>
<identifier>spiderman</identifier>
</track>
<track>
<title>Instances</title>
<location>rtmp://tezpua38ghnm.rtmphost.com/VideoTutorials</location>
<identifier>instances</identifier>
<album>commercial</album>
</track>
<track>
<title>LivePresenter</title>
<location>rtmp://tezpua38ghnm.rtmphost.com/VideoTutorials</location>
<identifier>livepresenter</identifier>
</track>
</trackList>
</playlist>

Let’s pull it apart. First, we have the basic XML headers:
<?xml version=’1.0′ encoding=’UTF-8′?>
<playlist version=’1′ xmlns=’http://xspf.org/ns/0/’>

Next, the beginning of the tracklist, and the opening tag for the first track:
<trackList>
<track>

Inside the first track, we have the title of the video as you want it to show up in the playlist inside the <title> tags. After that we have the <location> tags, which define the RTMP path to your videos, but NOT the video name. The <identifier> tag takes care of the video name. Again, you don’t have to add the file extension if you’re playing FLV files.

VERY IMPORTANT NOTE: If you’re playing back h.264 files, such as MP4, or MOV, you need to format your <identifier> as such: “mp4:filename.extension”, so if you have an h.264 file called “spiderman.mov”, you need to put “mp4:spiderman.mov”. If you don’t, the video won’t play.

Next, we get to the <album> tag, which you will notice is not on all of the tracks. The <album> tag can be filled in with “commercial” to make the video file one of those really annoying unskippable files that you can’t fast forward through, and you can’t change videos until it’s over.

After filling in all the tracks we want, we make sure all the tags are closed, and we’re done. You should be able to open up the mediaplayer.html file and see something like this:

Note that the commercial does not show up on the playlist, but if you reach the end of video 1, the commercial (video 2) will play.

In my next installment of this article, coming soon, I will show you how to implement multiple, switchable playlists, and even more fun features, like mid-roll overlay advertisements, dynamically creating a playlist using PHP and MySQL, and much more.

Note: JW FLV Player is free for personal use, but Jeroen offers licenses for commercial use for 20 Euros. Please go to his order form to purchase a license.

This entry was posted on Thursday, May 8th, 2008 at 1:03 pm and is filed under Influxis, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.