Flash Media Video Streaming: Introduction – Part 3

Setting Up Video On-Demand, Embedding JW Player and Flowplayer

To store (add) Flash media on our CDN to your account

 

Perform one of the following:

 

  • FTP Client: Find out the name of the FTP server by viewing the FTP page on the Media Manager tab of the Media Control Center (MCC) ( http://my.gravlab.com/ ). Once you know the FTP server name, use your preferred FTP client to log in to that server using your MCC log in information. Navigate to the desired path and then upload the desired Flash media files.
  •  

  • MCC: From the File Management page on the Media Manager tab of the MCC, upload the desired Flash media file to the desired path on the origin server.
  •  

Flash Player

 

Once your Flash media files are hosted on a customer or CDN origin server, you are ready to set up your Flash player to stream on-demand. On-Demand streaming requires that you specify a Player URL (stream) and the file name of the Flash media that you would like to stream.

 

  • Player URL: The Player URL is the URL to the folder on either the customer origin or CDN origin server where your Flash media file is stored. This path can be found on the Flash Streaming page of the Flash tab in the MCC.
  • File Name: In your embedded code, specify the file name including the extension (e.g. MyFlash.flv).

 

§  Token Authentication: If you have enabled token authentication for Flash streaming, then you will need to append a question mark (?) followed by the token generated from the primary encryption key. For example, if your stream name is “WebCam01” and the token corresponding to your primary encryption key is “a4fbc3710fd3449a7c99984d1b86603c22be1006d830b,” then you would specify “WebCam01?a4fbc3710fd3449a7c99984d1b86603c22be1006d830b” as your stream name. For more information on token authentication, please refer to the Token-Based Authentication User Guide, which is available from the Media Control Center (MCC).

 

Tip: If you do not wish to expose the CDN path to your clients, you may choose to create a mask for the URL of the CDN origin server using a CNAME. For more information, please refer to the Masking the URL of a CDN Origin Server (CNAME) section below.

 

Provided below are sample implementations for JW Player 5.1 (or later) and Flowplayer 3.2.2. These sample code fragments are only provided to guide you through your configuration of Flash player for use with our CDN.

 

Note: If you have any questions on the implementation of your Flash player, please contact the appropriate software manufacturer.

 

JW Player Code Sample

 

When implementing this code, please keep in mind the following:

 

  • Update the path to the swfobject.js and player.swf files to your acount folder jwplayer)
  • You will need to replace FileName with the file name of the Flash media file stored on the origin server.
  • You will need to replace the value assigned to the streamer variable with the URL to the folder where your Flash media is stored in your account. You can view the base URL from the Flash Streaming page of the Flash tab of the MCC.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div width="auto" align="center"><div id="player001">Player is loading ... <a href="http://your-account-NAME.gravlab.net/00xxxx/demoplayer/filmstrip-480p.mp4">... loading video ....</a></div>
<script type="text/javascript">
jwplayer("player001").setup({
"flashplayer": "http://global.gravlab.net/003119/5-10/player.swf",
"id": "playerID",
"width": "768",
"height": "432",
"mute": "false",
"repeat": "false",
"controls": "true",
"autostart": "false",
"skin": "http://global.gravlab.net/003119/playerassets/skins/glow.zip",
 "levels": [
        {file: 'http://your-account-NAME.gravlab.net/00xxxx/demoplayer/filmstrip-480p.mp4', type: 'video/mp4' },
        {file: 'http://your-account-NAME.gravlab.net/00xxxx/demoplayer/filmstrip-480p.webm', type: 'video/webm' },
    ],
"image": "http://link-to_your-image.jpg"
});
</script>
</div>

 

 

Flowplayer 3.2.2 Code Sample

 

When implementing this code, please keep in mind the following:Embedding JW Player and Flowplayer

  • Update the path to the SWF files. If the path to either SWF file is invalid, then your Flash player will fail to stream your video.
  • You will need to replace FileName with the file name of the Flash media file stored on the origin server. Make sure that you do not include the file name extension.
  • You will need to replace xxxx with your CDN account number. This account number can be found on the upper-right hand corner of the MCC.
  • You will need to replace Path with the path where the encoder is publishing the stream.

Embedding JW Player and Flowplayer

<head> <script src="flowplayer-3.2.2.min.js"></script>

</head>

<body>

<!-- setup player normally -->

<a>

<img src="http://static.flowplayer.org/img/player/btn/showme.png"  />

</a>

<script>

$f("fms", "flowplayer-3.2.2.swf", {

clip: {

url: 'flv:FileName',

// Configure clip to use RTMP as our provider.

provider: 'rtmp'

},

// Streaming plugins are configured under the plugins node

plugins: {

// RTMP plugin configuration.

rtmp: {

url: 'flowplayer.rtmp-3.2.1.swf',

// netConnectionUrl defines where the streams are found.

netConnectionUrl: 'rtmp://fml.xxxx.Gravlab.net/00xxxx/Path/'

}

}

});

That’s it, you’re set. There are many players available from GravityLab so if you need help customizing your player, drop us a line.

0