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.
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
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.
- Target each div with class of ‘bpe_video’
- Get the width and height of the preview image
- 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.
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.
Let’s look at adding the JW Player in more detail as well as how you can use an alternative player.