Saturday, December 15, 2018

How To Configure JWPlayer WordPress For Dual File Sources

fvpftw-03

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
  • 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!

5 comments

  1. Thank you Chris, this is really useful stuff and just what i needed!

  2. I’ve been struggling for the last couple of hours looking for a method of connecting to a playlist(?) for JW Player. I see I can use mp3s but what I’ve been trying to figure out is how to get something like playlist.pls to work in JW Player. Is this even possible?

    • That I am not sure. I have only ever used MP3. Their Forum can be useful if you have a specific example of code you are looking for. They are responsive there, but I admit their “How To” documentation is not exactly great

      • I found this on their website: jwplayer(“container”).setup({ file: “http://[wowaz.server]:1935/vod/mp4:audio/file.m4a/playlist.m3u8”, height: 30,…..

        So I tried putting in this http://38.96.148.187/tunein.php/minnesota/playlist.ram

        and it didn’t work. It seems to me if you can put a m3u8 file in there you should be able to use a ram file. But this is not my area of expertise so what do I know.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
%d bloggers like this: