JW Player and Wordpress Shortcode

One of the websites I’m working on at the moment is heavily orientated around video. In company with at least one other gentleman, we’ll be posting tutorials, reviews and classroom-style lectures for individuals undertaking flight training.

When you’re investing so much into a website with such a heavy focus on video, it’s important to use the right tools. I spent the best part of three days purchasing, researching and experimenting with no less than 15 different players before I decided that the Longtail JW Player was about as good as one could use.

About JW Player

JW Player is extremely flexible. Its XML-based skinning functionality allows you to completely customize its look while the plugin architecture allows the author to very easily extend functionality of the player with features such as sharing, recommendations, searching, analytics and ad serving.

The player can be configured to play a variety of video and audio formats and its HTML5 readiness means that it can be used to render video on nasty platforms such as the iPad and iPhone.

A branded player can be downloaded at no cost while a purchase fee will permit you to download an unbranded (and licenced) version. The LongTailVideo.com websites has a vibrant open-source community of developers and contributors that are constantly adding to the repository of add-ons, skins and plugins… many that can be used for free.

Configuration of the Player

After playing around with the player for a little while, I determined that the nature of the configuration code was probably a little complex for anybody that was “challenged” when it came to working out appropriate embed code. It’s not that it was hard, it’s just that I didn’t want authors and guest contributors spending any more than a few seconds to add a video… and I wanted to be able to provide very clear instructions on its use.

Despite the fact that there’s a WordPress plugin for JW Player that satisfies virtually all users, I didn’t want authors to have to vacate their post in order to create necessary code, and I required some custom functionality no other plugin platform provided. As with all good things WordPress, the solution came in the way of shortcode. The advantage of shortcode (in this case) is that it gives me full control over how the player will render while providing only the necessary configuration options to the author.

Introduction

It must be noted that I’m providing code for the licenced player. If you’re using the unlicenced branded version, you’ll have to comment out code relating to logo placement (this is a feature of the licenced version).

You’ll have to download JW Player and upload it via FTP to a directory on your website (including the jwplayer.js file that is included in the download package). I suggest uploading all content into a directory called ‘player’. To use the custom logo functionality as I have done in the example code, you’ll have to have a paid commercial copy of the software. Although it’s listed as $89 (at the time of writing), you’ll get a 50% coupon code if you provide your email and wait for the autoresponder to send you the coupon code (it comes a day or so after the 75% offer).

To save you waiting, the code of sep11disc50 will work for the remainder of this month.

If you’re not prepared to spend the money, the unlicenced copy is still excellent.

There’s a fantastic Setup Wizard that will guide the average user through the process of creating code for a standalong player or XML-based playlist (with or without some plugins). What I’m providing is a shortcode option for those that have a very specific need.

Note that my shortcode implementation provides for the HTML5 compatible Sharing Plugin. The sharing plugin provides copy fields for embed code and a direct link to the page that the video is hosted on. It also provides a Twitter and Facebook share button.

What does it look like?

Here’s the finished product.

Loading the player ...

I embedded this video into this post with the following shortcode:

[vid file="http://www.internoetics.com/media/video/startrekweird.flv" link="http://www.internoetics.com/2011/09/20/jw-player-and-wordpress-shortcode/"]

Instructions

Keep in mind that what I’m providing is a quick dirty hack. I’ll tidy it all up soon and provide updated, neat, functional code.

My implementation is a little odd. I’ve created a file called embed.php that handles the embed code (and provides some other functionality I’ll talk about later). I’ve provided the code below but it’s worth downloading the attachment in case page formatting screws anything up.

You will have to post the following code into either your theme’s functions.php file, your custom_functions.php file or, as I’ve done, into a custom shortcode plugin I simply call shortcodes.php.

You’ll have to reference jwplayer.js in the head of your website. The first part of the code below does that. The second part includes the player function.

// Add jwplayer.js to head of document

function jw_head() {
  ?>
  
  <?php
}
add_action( 'wp_head', 'jw_head' );

// JW Player Shortcode

function my_video($atts, $content = null) {
extract(shortcode_atts(array(
    'file' => '',
    'id' => 'playerID',
    'link' => 'http://www.YourDomain.com',
    'stretching' => 'exactfit',
    'height' => '260',
    'width' => '510',
    'image' => 'http://www.YourDomain.com/images/preview.jpg'
  ), $atts));
	$return = $content;  
    	if($content)  
        $return .= "<br /><br />";  

// $return .= "<script type=\"text/javascript\" src=\"http://www.YourDomain.com/player/jwplayer.js\"></script>

$return .= "<div id='mediaplayer'>Loading the player ...</div>
<script type=\"text/javascript\">
	jwplayer('mediaplayer').setup({
		'flashplayer': 'http://www.YourDomain.com/player/player.swf',
	 	'file': '$file',
		'height': $height,
		'width': $width,
		'link': '$link',
		'logo.file': 'http://www.YourDomain.com/player/LogoWatermark.png',
		'logo.hide': 'false',
		'logo.link': 'http://www.YourDomain.com',
		'logo.position': 'top-left',
		'stretching': '$stretching',
		'image': '$image',
		'plugins': { 
     		  'sharing-3': { link: '$link', code: '<iframe width=\"480\" height=\"275\" src=\"http://www.YourDomain.com/player/embed.php?video=$file&link=$link\" frameborder=\"0\" scrolling=\"no\" allowfullscreen></iframe>'}
    		 }

});
</script><p>&nbsp;</p>";

return $return;

}
add_shortcode('vid','my_video');

Since I’m using the Sharing Plugin which enables others to embed and/or share a video that I’ve posted, I’ve created a simple little file called embed.php that handles embedding the code on the website of others.

I’ve chose to embed videos on remote websites by use of iframes. If it’s good enough for YouTube, it’s good enough for me. One of the great advantages of iFrames is that you can roll out changes globally without worrying that you’ll break a video link somewhere.

The embed code that others use will look like this:

I’m passing the video link and page link to embed.php so I can use it to generate embed code. Although I’m using default video dimensions of 480×275 for remote videos, you’re free to change this. I’ve used it simply because it seems to be a size that would suit the majority of users. Of course, users could change dimensions by altering the embed code themselves. An example is provided below.

It may be worth including default height and width variables to the iframe embed code simply so the end user is aware that they can change it.

Whatever dimensions are used, the video will fill the container. Having said that, this is an option that can be changed in the shortcode… or you could add it to the shortcode so you could selectively alter the behaviour of specific videos.

Basic Configuration

You must make the following changes to the code.

Change all references to YourDomain to your domain.
stretching defines how to resize the poster image and video to fit the display. It can be none, exactfit, uniform or fill. I use exactfit by default. It will disproportionally stretch the video/image to exactly fit the display.
image is the preview image that will render in the player container before you hit play. Change this to your own image. It will stretch to the video container.
If you’re using an unlicenced player, comment out logo.hide, logo.link and logo.position with two forward slashes ( // ).
Define the default sharing dimensions on line 43.

Changes to embed.php

In embed.php, you will have to also define default sharing dimensions on lines 5 and 8.
In embed.php, you must change all references to YourDomain to your domain.
On line 31, you should reference an image called error.jpg that will display on another webpage when your video fails to load.

Additional Configuration

The LongTailVideo.com website details all the available configuration options, playlist properties, layouts, behaviours, logo properties and so on. Any of the elements of the shortcode can be altered – and others can easily be added. One of the advantages of shortcode is that I can control how authors or visitors embed their videos… and I can restrict what functionality they have the option to change.

Embed.php

One of the (many) motivating factors to use my own shortcode rather than the excellent plugin was due to the control I could have over statistical data by having a PHP file (embed.php) load each remote video… although you could use it for local videos as well if you wanted too. I’ve incorporated custom statistical code, download data and so on in embed.php that provides me with information I can’t obtain via traditional means. Despite the fact I’m not using it myself, I also wrote a database-backend that would essentially obfuscate the video URL via an ID that would reference the video from a non-public directory.

I’ve also written a few additional lines of code (that I haven’t provided since it’s a function I handle via a database) that will truncate the video page URL the first time it’s rendered for simple social statistics.

Embed YouTube Videos

JW Player makes it easy to embed YouTube videos in your custom container.

For example:

Loading the player ...

I’ve simply replaced the video URL with the full YouTube URL.

As a point of interest, since this is another instance of JW Player on the page, I’ve added id=”mediaplayer2″ to the shortcode (you can add as many videos to the same page as you wish). YouTube won’t automatically scale so I’ve also added height=”290″ to ensure I don’t get black lines to the left or right of the video.

Download the Code

Download the code here. If you have any problems, please let me know.

If you liked this article, you may also like:

Comments

Xfactor says:

November 9, 2011 at 7:51 am

This is what I was looking for. Have a couple question. Where do you place the code in your function.php. Cause didn’t work for me. I;ve also created a shortcode.php file. Where did you place that at on your server?

- Marty says:
  
  November 9, 2011 at 3:57 pm
  
  I’m out of town for a couple of days. I’ll reply in about 48 hours… I hope that’s okay. I got your email! Thanks.
  
celma says:

December 5, 2011 at 1:42 pm

thx for the script, Do you know how to hide the link to the youtube video??

- Marty says:
  
  December 5, 2011 at 8:41 pm
  
  Hi. What link are you specifically referring to?
  
celma says:

December 8, 2011 at 11:45 pm

the youtube video http://www.youtube.com/watch?v=dr5zVxxxxxx
I use your code and I would like to add this: http://www.longtailvideo.com/support/forums/addons/working-with-modules/8830/hide-media-urls-with-id-script but i m a noob in php

RB says:

April 9, 2012 at 6:04 am

Hi Marty.. I’m using the wordpress plugin version of JW Player and Amazons3 which works great.. however, what do you do about securing content as the source is visible in the source code ?
Cheers.

- Marty says:
  
  April 15, 2012 at 10:34 pm
  
  Hi RB. Sorry about the late reply – busy at work. There are a number of options I can think of. You could use a database to reference a video; you could encrypt page data; you could rewrite the URL (I think, haven’t tried it); you could store in a non-public directory. I’ll have to have a think about the best way of doing it. I’ll put it on a list of things to get to and post a few workable solutions. Whatever method you choose to use, it’s virtually impossible to completely protect whatever you’re prepared to render on a page. There’s always a way…
  
  I’ve moved away from the method I’ve used above. It was always a quick and dirty hack that I knew was never going to last. I’ll post clean code when I find the time.