• Sales: 1-800-961-2888
  • Support: 1-800-961-4454

Streaming Cloud Files with JW Player


Cloud Files supports the JW Player for streaming video files. We also support FlowPlayer and OSMF.

The JW Player has a commercial license, which means you must purchase it from Longtail video: http://www.longtailvideo.com/order.

Supported media formats for JW Player:

Audio:

  • Streaming with ability to jump around: MP4, AAC, and FLV
  • Progressive Download: MP3

Video:

  • Streaming with ability to jump around: MP4, MOV, and FLV

 

Upload JW Player 6

1. Download the JW Player from www.longtailvideo.com/jw-player/.

2. Unzip the file and upload it to a Cloud Files container.
Note: You may choose to upload the player in the container that holds your media or in another container.

3. Download the plugin files for your Cloud Account here.

4. Unzip the plugin files and upload them to the same container as the JW Player.

5. Confirm that the container that holds your player and plugin are CDN-Enabled. If it is not, you may enable it through the New Cloud Control Panel or through the API.

From the New Cloud Control Panel:

  1. Click the gear icon next to the container's name.
  2. Select "Make Public (Enable CDN)".
  3. Click the "Publish to CDN" button to confirm.

From the API, see the API Dev Guide section, "CDN-Enable a Container".

 

Add JW Player 6 to Your Web Page

There are three elements you must add to your web page in order to make JW Player work: a SCRIPT element that points to the player, a DIV that positions the player, and a SCRIPT that calls the player and the media.

1. Add a SCRIPT element to the HEAD of your HTML that points to jwplayer.js file.
For this step, you need the link to the jwplayer.js file you uploaded in the above instructions. To get the link from the New Cloud Control Panel:

  1. Open the container where you uploaded the plugin (Step 4 above).
  2. Locate the jwplayer.js file in the Object List.
  3. Click the gear icon next to the plugin file.
  4. Click "View All Links".
  5. Copy the link makred "HTTP".
  6. Replace "/path/to/jwplayer.js" in the text below with the link you copied.

 Enter this SCRIPT to the HEAD of your HTML page, substituting in the link to your jwplayerjs file:

<script type="text/javascript" src="/path/to/jwplayer.js"></script>

2. Add a DIV element to your HTML page with a unique ID attribute value, such as “player”. The "Loading the player..." text is whatever text you would like to display while the player loads.

<div id="player">Loading the player...</div>

3. Add a SCRIPT element right below the DIV you created in Step 2. This adds the JW Player and your media to your page.
This SCRIPT uses the following options:

  • file - The link for the media. Locate your media in a Cloud Filed CDN-enabled container, click the gear icon, click "Show Links", and use the entire link. For MP3s, using the HTTP link; all others use the Streaming link.
  • image - The HTTP link for an image to display in the player. The image displays for videos while the file loads or for music, while the file plays. Do the same steps for the image as you did for the file.
  • provider - The HTTP link to the JW Player. This is the link to the container you used in Step 2 in the "Upload JW Player 6" instructions above.
  • primary - This sets player rendering mode. The recommended setting is 'flash'.
<script type="text/javascript">
    jwplayer('player').setup({
        playlist: [{
            file: '/path/to/media/file.mp4',
           image: '/path/to/image.jpg',
provider: '/path/to/AkamaiAdvancedJWStreamProvider.swf'
        }],
      primary: 'flash'
    });
</script>

 



© 2011-2013 Rackspace US, Inc.

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License


See license specifics and DISCLAIMER

6 Comments

Hi, thanks for the plugin. I followed the instructions for JW Player 6 but I am still unable to jump around my video timeline without completely downloading the video.

Video plays, but unable to jump a section that has not been downloaded.

I am not sure where to specify the provider, JW6 does not use xml.

I uploaded the plugin to CDN container and also on the server just in case. I am guessing, it has something to do with the way I defined the provider.

Here is my setup:

<div id="myElement"></div>

<script>
jwplayer("myElement").setup({
image: "/uploads/Untitled-2.png",
file: "Stream_URL_from_rackspace",
provider: "AkamaiMediaProvider.swf"
});
</script>

Thanks a lot.

Lou,
Firstly - my apologies for a VERY delayed response. Is this still an issue? Be sure when you specify the provider that you the AkamaiAdvancedJWStreamProvider.swf file and not the AkamaiMediaProvider.swf you list in your comment above. Also - the filename is not enough you need the complete pathname to the file on the CDN using the CDN HTTP path.

Hope you have it all working.
Tom

Hello,
there is any guide how to setup the Wordpress JW Player plugin in order to be compatible with the streaming cloud files?
Thank you.

I can't think of a reason why it wouldn't work, but I don't know of a specific guide for it either. You might search for advice on using the Wordpress plugin with a CDN, since any general advice on using it with a CDN should also apply to using it with the Cloud Files CDN.

Thank you Jered,
I also can't think of a reason why it wouldn't work. But I'm looking on how to make it work. :) Have you any idea where to take a look for a guide?

Not offhand, as I haven't tried it myself, but I did find a bit poking around Google. This thread describes someone having a problem with that kind of setup using WP-Supercache and Amazon:

http://wordpress.org/support/topic/cdn-support-in-jw-6

You might also look in the plugin's forums:

http://www.longtailvideo.com/support/forums/addons/working-with-wordpress

Add new comment