Streaming Video with the JW Player
NOTE: This document is outdated. For the most updated versions, please refer to the player-specific RTMP Streaming guides: Video Delivery: RTMP Streaming for v5 or Video Delivery: RTMP Streaming for v4.
Purpose
This guide covers the basics of streaming video—how it works and how to configure your player to support it—and provides player and playlist configuration examples for streaming video.
Introduction
When it comes to video on the web, there are two methods of delivery: progressive download and streaming. This guide deals primarily with streaming video.
With the progressive download method, files are downloaded progressively into the browser’s cache. Playback of this method of delivery requires the sequential download of the video file. This means that you cannot skip ahead to a portion of the video which has not yet been downloaded.
The second method of video delivery, the one we will be discussing at length, is streaming video. Here, there is a continuous connection between the client and the server from which the video streams; no downloading is involved, which means that you can jump to any point in the video without having to wait for that part to download.
Typically, streaming video is the more expensive of the two delivery methods, due to the cost of streaming video servers. On the other hand, streaming video is also more reliable and more secure than progressively downloaded video. Many video servers offer built-in content-protection mechanisms, load balancing and bandwidth switching.
CONTENTS
- How Streaming Works
- Streamer Application
- Configuring the JW Player to Stream Video
- Using a Streaming Video in a Playlist
How Streaming Works
Streaming works through a very simple mechanism. Every time a seek operation is performed, the media player makes a request to the server with a couple of variables—the file to play and the start position. The server then starts the video from the offset given.
Below is a short example. After you start the video, you can jump to any part in the video without having to wait until it is loaded.
Streamer Application
A streamer application is server software that provides enhanced file-serving capabilities inherent to audio and video streams. It permits the viewer to seek or jump to any point in the video.
When you embed a progressively downloaded video, you need only the file FlashVar. This FlashVar tells the video player where the video is located on the internet. For playback of streaming videos, there are two pieces of information needed—the path of the video and the location of the application that is streaming the video.
Examples:
HTTP
http://www.mydomain.com/path/to/application.php?file=path/to/video.flv
RTMP
rtmp://www.mydomain.com/path/to/application/path/to/video.flv
The JW Player cannot automatically detect which part of the URL is the application and which part the video, so you MUST split up your path into a file and a streamer FlashVar. The streamer FlashVar tells the player the location of the streamer application:
HTTP
streamer=http://www.mydomain.com/path/to/application.php&file=path/to/video.flv
RTMP
streamer=rtmp://www.mydomain.com/path/to/application&file=path/to/video.flv
Note: the path to the file is generally a relative path to the content on the streaming server. It is likely impossible to access the video file directly from a web browser.
Configuring the JW Player to Stream Video
Configuration Options
- streamer (undefined): location of an rtmp/http server instance to use for streaming. Can be an RTMP application or external PHP/ASP file. More info here.
- file (undefined): location of the media file or playlist to play.
- type (JW4) / provider (JW5) (undefined): determines what type of media file this item is, thus which provider the player should use for playback.*
* Note: The JW Player will always attempt to automatically detect and play a file. Sometimes, it's impossible to specify an extension (if you use a token security, for example). In this case, you should always set type (JW4) / provider (JW5) FlashVar in order to tell the player how to play the video.
HTTP
- http.startparam ('start'): the querystring parameter to provide the start position to the server.
RTMP
- rtmp.loadbalance (false): if set to true, the RTMP model (JW4) or MediaProvider (JW5) will assume that the file FlashVar is XML file (currently only SMIL is supported) used for loadbalancing purposes.
- fcsubscribe (JW4) / rtmp.subscribe (JW5) (false): if set to true, the RTMP model (JW4) or MediaProvider (JW5) will use a stream subscription mechanism for loadbalancing.
Example Player Configurations using Streaming Video
HTTP
Object / Embed
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='flashvars' value='streamer=http://www.mydomain.com/path/to/application.php&file=path/to/video.flv&type=http'>
<embed id='player1'
name='player1'
src='player.swf'
width='300'
height='300'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='streamer=http://www.mydomain.com/path/to/application.php&ile=path/to/video.flv&type=http'
/>
</object>
SWF Object 1.5
<script type="text/javascript">
var so = new SWFObject('player.swf','flashContent','300','250','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('bgcolor','#FFFFFF');
so.addParam('flashvars','streamer=http://www.mydomain.com/path/to/application.php&file=path/to/video.flv&type=http');
so.write('flashbanner');
</script>
SWFObject 2.X
<script type="text/javascript">
var flashvars = {
'file': 'path/to/video.flv',
'streamer': 'http://www.mydomain.com/path/to/application.php',
'type': 'http'
};
var params = {
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes = {
'id': 'player1',
'name': 'player1'
};
swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>
RTMP
Object / Embed
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='flashvars' value='streamer=rtmp://www.mydomain.com/path/to/application&file=path/to/video.flv&type=rtmp'>
<embed id='player1'
name='player1'
src='player.swf'
width='300'
height='300'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='streamer=rtmp://www.mydomain.com/path/to/application&file=path/to/video.flv&type=rtmp'
/>
</object>
SWF Object 1.5
<script type="text/javascript">
var so = new SWFObject('player.swf','flashContent','300','250','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('bgcolor','#FFFFFF');
so.addParam('flashvars','streamer=rtmp://www.mydomain.com/path/to/application&file=path/to/video.flv&type=rtmp');
so.write('flashbanner');
</script>
SWFObject 2.X
<script type="text/javascript">
var flashvars = {
'file': 'path/to/video.flv',
'streamer': 'rtmp://www.mydomain.com/path/to/application',
'type': 'rtmp'
};
var params = {
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes = {
'id': 'player1',
'name': 'player1'
};
swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>
Using a Streaming Video in a Playlist
The JW Player supports playing playlists of streaming videos. This can be done in several ways.
If all your videos come from the same server, you only have to define the streamer and file FlashVars. The player will automatically use the application to stream all videos in the playlist. For example:
streamer=rtmp://www.mydomain.com/application&file=http://www.mydomain.com/path/to/playlist.xml
The playlist (does not include the streamer):
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<tracklist>
<track>
<title>The first video</title>
<location>path/to/first.flv</location>
</track>
<track>
<title>Second video in the list.</title>
<location>path/to/second.flv</location>
</track>
<track>
<title>And the final one.</title>
<location>path/to/third.flv</location>
</track>
</tracklist>
</playlist>
If your videos come from several servers, you may assign the streamer FlashVar to individual playlist entries (introduced in JW 4.3). You may also mix streaming and non-streaming content in one playlist. For example:
file=http://www.mysite.com/path/to/playlist.xml
The playlist (includes the streamer where needed):
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<tracklist>
<track>
<title>The first video is not streamed</title>
<location>http://www.mysite.com/path/to/first.flv</location>
</track>
<track>
<title>The second video is streamed</title>
<location>path/to/second.flv</location>
<meta rel="streamer">rtmp://www.mydomain.com/application</meta>
</track>
<track>
<title>The last video uses a different streamer</title>
<location>path/to/third.flv</location>
<meta rel="streamer">rtmp://www.someotherdomain.com/other_app</meta>
</track>
</tracklist>
</playlist>
These examples use the XSPF playlist format. The entries to use for all other playlist formats can be found in the overview of supported playlists.