Posts tagged admin area
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