Adding JWPlayer video player to your installation of SetSeed

SetSeed lets you choose which video player you want to use with your websites. SetSeed comes with the similarly named jPlayer ready to use. This is used by default for videos added in the CMS.

However, you can easily change the player to another one of your choosing and it will work on all sites powered by your installation.

SetSeed includes support for the JWPlayer/LongTail Video player. All you need to do is drop in the relevant files.

Adding the JW Player to your installation of SetSeed

SetSeed automatically recognises the latest version of JW Player if it is added to SetSeed in the following way.

Put the following 3 JW Player files in the /asset-proxy/javascripts/ folder on your server.

player.swf
jwplayer.js
yt.jwf

If these files are present SetSeed will automatically include them in the javascript file it generates for each site. It will also include the code required to convert the above HTML into a JW Player instance. This code is in the /asset-proxy/javascripts/videoplayer-jwplayer.js file. You can look at this as an example of the process.

If you look at that file you’ll notice how the width and height of player are taken from the width and height of the preview image. Therefore, you can change the size of the player by using a different sized preview image.

You don’t need to make any changes to that file though. As long as the above 3 files are present, all videos on any site powered by your installation of SetSeed will automatically use the JW Player to display them. The latest version of JW Player should also use an HTML 5 player on iPad/iPhone devices, if it can’t use an HTML 5 player it will just default to the link to the video file itself. This will work providing the video is in the h.264 format.

Using a different player with your installation of SetSeed

If you wan’t to use a different video playback system you can simply place all swf files needed in the /asset-proxy/javascripts/ folder (put any graphics/theme files/folders in there too).

You can then either reference them directly from your site’s templates or, you can add all javascript code to the videoplayer-custom.js file, which is automatically added to each site’s javascript file in the absence of a JW Player.

Remember that you will need to replace the files you add, each time you upgrade SetSeed on your server, so make a note of the files you need to add back in.

To convert the HTML that SetSeed generates for a video into a player you’ll need to write some jquery or javascript with the following logic:

  1. Target each div with class of ‘bpe_video’
  2. Get the width and height of the preview image
  3. Use those values, along with the href attribute of the link in the div, to create a player and replace the contents of the div.

To preserve any alignment styling that has been applied to the div in the CMS make sure the player goes inside the div, and doesn’t just replace it.

Take a look at the JPlayer example in the following file to get an idea of the process. /asset-proxy/javascripts/videoplayer-custom.js

What HTML does SetSeed generate when a video is added to a page?

When one of your clients logs in to their admin system and adds a video to their page, SetSeed adds a very simple HTML snippet to the page which looks like this:

<div class='bpe_video'><a href="VIDEO FILE URL"><img src="PREVIW IMAGE URL" /></a></div>

This is the best way of handling a video in it’s simplest HTML form because it provides a working option for any device, whether or not they support Flash. This works on iPads and iPhones for example. SetSeed is pre-configured to send video data in a way that iPhones and iPads require, using the ‘data-range’ values etc.

It’s then obviously a very simple process to convert that to a flash player or even HTML 5 player, using Javascript.

Let’s look at adding the JW Player in more detail as well as how you can use an alternative player.