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 Akamai Advanced JW Player Provider plugin files for JW Player 6.

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 Cloud Control Panel or through the API.

From the 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 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>

 



Was this content helpful?




© 2014 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