Over the weekend I was working on another project and decided to document quickly the issue I was having with the Longtail Video JWPlayer 6 WordPress plugin. There was about two days of troubleshooting for me to finally figure out the proper shortcode syntax to use with the newest version of the player. The shortcode is the same regardless of the free player or the paid versions that remove the watermark. Let’s start with my simple requirements and go from there.
My Video Requirements
I am building some training for the people on my Virtual Fitness Coach Team and I wanted to make sure that the video was STREAMED on the desktops using Flash to protect the video sources. I also wanted to make sure there was an HTML5 fallback option for iPad and other devices in case they did not work with an iPad. As I looked into players I quickly found that the Longtail JWPlayer for WordPress was the resounding option. Seeing as the player was free I wanted to see if I could get it working using my Amazon CloudFront Distributions.
Setup Amazon CloudFront
Basically you need an Amazon Bucket with a bucket policy that allows read only access. This is pretty standard practice. I have started a standard practice of naming my buckets as a domain mapping for later use so things make sense.
- Create new S3 Bucket with read only bucket policy
- Name = media.domain.com
- Create Bucket Policy
- Create a CloudFront Streaming Distribution with DNS
- Back the distrobution by the previous S3 Bucket
- DNS = stream.domain.com
- Create a Cloudfront Download Distribution with DNS
- Back this distribution with the same S3 Bucket
- DNS = media.domain.com
Once you have this setup you will have the things in place to setup the player plugin for both RTMP streaming AND HTML download. Of course you can pick your Video quality that you like, but I have not been using High Definition for my purposes.
JWPlayer WordPress Plugin Short Codes
Here is where things got confusing. There is a compeltely different syntax between version 5 and version 6. This is where I got stuck so here is the two differing versions.
JWPlayer WordPress Plugin Short Code Syntax Version 5
[jwplayer file="rtmp://stream.domain.com/cfx/st/mp4:YOURFILE.mp4" provider="rtmp" html5_file="http://media.v-fit.us/YOURFILE.mp4"]
JWPlayer WordPress Plugin Short Code Syntax Version 6
[jwplayer sources="{ file:'rtmp://stream.domain.com/cfx/st/mp4:YOURFILE.mp4' },{ file:'http://media.domain.com/YOURFILE.mp4' }"]
Now you can see that the first source in both options is the stream and the second source is the direct MP4 both served from CloudFront so it will work BOTH in flash streaming on desktops and HTML5 on iOS devices. You can see the syntax is completely different but I can tell you the new Player 6 works perfectly with the correct syntax!