Freelance Technical Digital Media Consultant
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):
- Install the latest version of the JW Player Plugin (Plugins -> Add New -> Search for "JW Player Plugin for WordPress")
- Activate the plugin, you'll notice that a new menu called "JW Player" appears in your admin area
- 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)
- 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"
- 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)
- 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"
- 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!
- In point 7 I left the spaces in the file name (didn't replace them with + or %20) because the player and/or the streamer handles the conversion to the right format
- This is the setup for basic CloudFront streaming. If you want to use private streaming with expiring urls to protect your content, there's a number of plugins out there you can use. I've done a quick review of the major ones and the best and lowest cost appears to be the Secure RTMP Streaming Video Plugin for WordPress from WordPress Academy - it's simple enough to deliver just this functionality.
- I've not looked at how you do this neatly with a html 5 backup yet, and I'm not sure if it's even possible. Standard progressive download streaming from S3 is possible out of the box with JW Player via use of the external media options in the media gallery and these options allow you to specify a html5 alternative there. For a good video on how to use these options visit http://askcharlyleetham.com/members-only/using-jw-player-wordpress-amazon-s3-youtube/login and if you want to protect the s3 content too visit http://askcharlyleetham.com/video/using-securedl-and-jwplayer-to-secure-your-amazon-videos/login to see how to do this with the securedl plugin
- For the basic JW Player shorcodes visit http://www.longtailvideo.com/support/addons/jw-player-plugin-for-wordpress/11913/jw-player-plugin-for-wordpress-shortcode-examples
Related posts on coderchris.com:
- JW Media Player – A Godsend For Flash Streaming
So, you want or need to stream multimedia content from your website; you don't have time... - Meld WordPress And Facebook Together With Wordbook
Now this is a pretty neat plugin: Wordbook allows you to send your wordpress blog... - WordPress 2.3 has been released
WordPress 2.3 has been released and I can already see the improvements as I'm writing... - Advanced Syntax-Hilighting Online Code Editors – A WordPress IDE?
When I write plugins for wordpress I like to do it on a test blog... - Dodgy WordPress Plugins and Themes
Recently I have been doing a LOT of research into various wordpress themes and plugins...
| Print article | This entry was posted by Chris on July 31, 2011 at 1:56 pm, and is filed under CloudFront, Streaming. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
My Gumtree Ads
about 2 years ago - No comments
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…
Dodgy WordPress Plugins and Themes
about 3 years ago - 4 comments
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…
Getting WordPress To Ping Google Blog Search
about 3 years ago - 1 comment
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…
Advanced Syntax-Hilighting Online Code Editors – A WordPress IDE?
about 3 years ago - 1 comment
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…
All of A Twitter
about 4 years ago - No comments
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…
WordPress 2.5 Released!
about 4 years ago - 1 comment
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…
MySQL DBA Database Administrator Course Review
about 4 years ago - No comments
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…
Meld WordPress And Facebook Together With Wordbook
about 4 years ago - No comments
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…
Make Money With WordPress And Matched.co.uk
about 4 years ago - 7 comments
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…
WordPress 2.3 has been released
about 4 years ago - No comments
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…

about 9 months ago
Great article this is exactly what i was looking for. I followed everything you said and it worked, but my video doesn’t show up it only has audio? It is streaming from cloudfront but just no picture.
Am i doing something wrong, or if you know of a fix for this that would be greatly app.
Thanks
about 9 months ago
Might be the encoding of the video – does it work in the cloudfront diagnostic tool?
about 9 months ago
Thanks for the reply. Yeah it just plays audio in the cloudfront diag tool? Should it play video. When the file is on my desktop it plays with quicktime. Originally it was a FLV file and then i use a free converter to mp4, but could it not of did the job properly?
about 9 months ago
Sounds like its the encoding then – pretty sure theres some recommendations for codecs to use (e.g.h.264) on the cloudfront site
about 9 months ago
Jesse,
Use HandBreak free converter and click the option WEB OPTIMIZE. It should help.
about 9 months ago
BTW Chris I’m thankful to you for this Great Article ! Its the only article on web that’s explaining RTMP using JW Player to us common marketers who are not too technical
I did what you said above and my videos finally work right from CloudFront (Firstly i thought I will have to buy super expensive EasyVideoPlayer
about 7 months ago
Hi Chris,
I have followed your tutorial but cant seem to get the video to work.
Example:
I have a .mov file called 3waylinks-intro.mov stored inside a folder called “mov” inside an amazon S3 bucket.
I have setup CloudFront with a streaming distribution linked to my bucket.
I have installed the JW Player WordPress Plugin and followed your tutorial above to add in the provider = rtmp and the streamer to = rtmp://s1zofo6jriaew7.cloudfront.net/cfx/st
Note: I have tried adding the :1935 to the streamer link as you have in your example but it made no difference to the end result.
I go to a post and add in the following shortcode [jwplayer config="villagevideo" file="mov/3waylinks-intro.mov"] but the video player shows up in the browser (Firefox/Chroms but NOT in IE) however when I click play the waiting wheel spins for about 5 seconds and then I get a pop-up error message saying “The following plugin was unresponsive: Unknown. Would you like to stop it?”
I have tried the following:
- I have tried placing the video in the root of the bucket without any folder but get the same result.
- I have tried adding the shortcode through the “Add Media” option and then entering in the rtmp://…. address to bring up the additional streamer fields etc but still no joy.
- I have tried granting full permission in bucket to allow open/download and edit permissions for myself and guests and still no joy.
Not too sure what I am doing wrong. If you have any suggestions then I would really appreciate it. Thanks
about 6 months ago
Thanks for this help!!
about 3 months ago
Good article, Chris,
Here is additional information
http://wpacademy.tv/how-to-embed-an-rtmp-video-stream-in-wordpress.htm
And to note that JWPlayer 1.5.5 is currently broken for RTMP you must go back to version 1.5.4 to make it work (details above)