Embedding JWPlayer in Your Web Page

jwplayer - Alternate content

Using a popular media player called JW Player, I'm going to show you how to change your markup to embed a video player.

JWPLAYER, THE MEDIA PLAYER

If you aren't familiar with jwPlayer - software for playing videos on the web - it provides a Flash-based video player, and a Javascript API that let's you interact with the video as mentioned below. As of version 5.3 you can call the Javascript function jwplayer() with a set of config parameters, and the library will determine the best way to play the video (using Flash or native HTML5 video support).

There are different ways to embed your video with jwplayer. The older method of embedding the jwplayer on your page involves the SWFObject.

SWFObject is the most widely used open source library available for embedding Adobe Flash player. Before you can embed a player in your page, you want to include swfobject.js script in your HTML. Typically this will go in the head section of your markup. For this Blogger post, I included it in the body section of my markup, so putting it in the head section isn't required. The reason I am doing it this way is to avoid pulling SWFobject into every post on my blog.

You can download the script and host it yourself on your server. Or, you can use the copy provide by Google which is what I'm doing in the beginning of my code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><script type="text/javascript">
$(document).ready(function() {
  console.log("setting flashvars");
  var flashvars = {
    'file': 'media/swimmingwithdolphin.mp4',
    'image': 'images/kayaksplash.jpg',
    'autostart': 'false'
  };  
  var params = {
    'allowfullscreen':    'true',
    'allowscriptaccess':  'always',
    'bgcolor':            '#ffffff'
  };
  var attributes = {
    'id':                 'player1',
    'name':            'player1'
  };
  console.log('calling swfobject');
  swfobject.embedSWF('js/player.swf', 'player_container', '429', '332', '9', 'false', flashvars, params, attributes);
  console.log('done');
});  
</script>
<div id="video" style="width: 429px; height:332px; padding:0; margin: 0 auto;">
<p id="player_container">jwplayer - Alternate content</p>
</div>

The "player_container" is a block level HTML element that is needed to place the player. You can choose your own name for the element but you cannot skip this step.

The flashvars object lists the configuration options for the player. The "file" option is where you point to your video and is again mandatory. You can provide a cover image like I have done with the "image" option. This is called a splash image.

I followed jwplayer documentation for setting up the params object which enable both the fullscreen and JavaScript functionality of Flash. I also have a background color.

For the attributes object, jwplayer documentation recommend always (and only) setting an id and name, to the same value which is what I have done with "player1".

swfobject.embedSWF call is where everything comes together. The parameters are as follows:

• The URL of the player.swf [js/player.swf is my relative path]
• The ID of the container you want to embed the player into [player_container]
• The width of the player [429 pixels]
• The height of the player [332 pixels]
• The required version of Flash. Recommended setting is 9.0.115. [9]
• The location of a Flash auto-upgrade script. They recommend to not use it. [false]
• Finally, the flashvars, params and attributes are passed. [flashvars, params, attributes]

If you embed more than one player on the same page, give each player instance a different container id and use a different property value for "id" and "name" in the attributes section. Attributes is defined using object literal syntax, as in the following example:

var attributes = {'id':'player1','name':'player1'};

NEW EMBEDDING METHOD

The 5.3 release of jwplayer provides an API to embed your video, rather than using the older method of using SWFobject. The key advantage of the new API is that jwPlayer can now decide whether to use Flash or native HTML5 video. Using the SWFObject method, you are forced into using Flash.

For example, on the iPod, iPad, and iPhone, where Flash isn't supported, jwPlayer will automatically choose HTML5 video. Another advantage of the new method is better support for the jwPlayer Javascript API, which lets you do things like start and stop the video playback programmatically from your Javascript code. Let's place the player on our page with the new embedding method. We'll use the same video. The black window shows the code, followed by a step-by-step list of instructions.

<script type="text/javascript" src="js/jwplayer.js"></script>
<div id="video" style="width: 429px; height:332px; padding:0; margin: 0 auto;">
<p id="videoContent">jwplayer - Alternate content</p>
</div>
<script type="text/javascript">
    jwplayer("videoContent").setup({
        file: 'media/swimmingwithdolphin.mp4',
        image: 'images/kayaksplash.jpg',
        autostart: 'false',
        controlbar: 'bottom',
        flashplayer: 'js/player.swf',
        height: 332,
        width: 429
    });
</script>     

To embed jwplayer in your page:

• Download jwplayer. Extract files & upload jwplayer.js & player.swf to your server
• Start a script <script>, Load jwplayer.js & end script tag, </script>
• Set up an element (a div or a p) with an ID name as a placeholder for the video
• Start another script tag, <script>
• Call jwplayer using the ID from step 3: jwplayer("videoContent").setup
• I called it with 7 parameters: "file", "image", "autostart", "controlbar", "flashplayer", "height" and "width"
• file is your video file, image is for splash image, flashplayer is for in case it decides to play Flash, it needs to know where the player is. You get this file out of the downloaded zip file from longtailvideo.com
• Video height and width in pixels. One word of caution: The controlbar itself has a height (24 pixels in this case) so you need to add that number to your final height.
• End script tag, </script>. That's it! For the complete code, see black window above