email Amazon CloudFront Streaming In Wordpress With JW Media Player

I'm writing this post because a simple search on how to achieve CloudFront video streaming in wordpress using the jw media player plugin returns all kinds of results which are irrelevant if you just want to serve basic cloudfront streams!

So, here's how to do it (assuming you already know how to setup cloudfront to stream a video):

  1. Install the latest version of the JW Player Plugin (Plugins -> Add New -> Search for "JW Player Plugin for WordPress")
  2. Activate the plugin, you'll notice that a new menu called "JW Player" appears in your admin area
  3. Click on JW Player, you'll get a list of the players which currently exist (each player being a different customisation of the default JW Media Player)
  4.  Click the copy button next to the out-of-the-box player to create a new player you can customise. Rember to give the new player a meaningful name instead of the default "out-of-the-box_copy". In my case I'm going to call this player "Test"
  5.  Edit any of the player settings you like to create your new player (but don't click save - yet - if you do just click the edit button next to your new custom player to re-open the interface)
  6. Click the Advanced Settings tab of the player editor, scroll down the page until you see the streaming section and enter "rtmp" (without the quotes) in the provider box and the url to your clodfront streamer in the streamer box. e.g. if I setup a streaming distribution with the cname "videos.coderchris.com" my streamer url would be "rtmp://videos.coderchris.com:1935/cfx/st" that said you could just use the cloudfront default url for your distribution e.g. "hjh4887yh7h7.cloudfront.net" which would have the this streamer url: "rtmp://hjh4887yh7h7.cloudfront.net:1935/cfx/st"
  7. Now JW player knows where to stream your video files from you need to embed them in the page, which is best done using the jwplayer shorcode. So assuming I uploaded a video called "My Test File.mp4" to the S3 bucket feeding the cloudfront distribution and have set it's permissions to be public then I should be able to enter the following shortcode into a post or page "[jwplayer config="Test" file="My Test File.mp4"]" and that's it!
Notes: