Streaming plugin: pseudostreaming Configure any webserver to support video streaming

Introduction

Pseudostreaming is a protocol that can be installed on regular HTTP servers such as Apache, Tomcat, IIS or lighthttpd. It uses a server-side script for Flash-to-server communication. The player sends a HTTP request to the server with a start time parameter in the request URL's query string and the server script responds with the video stream so that its start position corresponds to the requested parameter. This start time parameter is usually named simply start. This same technique is used by the ultra-popular YouTube service which uses lighthttpd servers.

The biggest advantage of using pseudostreaming or any other streaming solution is the ability to seek in the timeline to positions that have not been downloaded yet to the player. This is most desirable for full-length movies because the visitor can seek to the last scene of a 2-hour movie if she wants to. Here are the benefits:

• Random seeking to any part of the timeline at any time.
• Starting playback in the middle of the clip's timeline.
• Provides integration possibilities to custom streaming servers and server-side scripts.
• Both FLV and H.264 files are supported.

Here is a list of most popular server-side technologies that support pseudostreaming:

• lighttpd Web server and it's FLV streaming script
• H.264 Streaming Module for Apache, Lighttpd and Nginx
• richbellamy.com pseudostreaming PHP script
• Apache FLV streaming using a native Apache module

See also pseudostreaming with IIS and ASP.NET

Download (Version 3.1.3)

Example

This example uses our pseudostreaming plugin to get video data from a lighthttpd web server and its flv_streaming module. Try seeking to any part of the timeline.

<!-- setup player container named "lighty" -->
<a class="player" id="lighty">
	<img src="http://static.flowplayer.org/img/player/btn/showme.png"  />
</a>

This is our JavaScript that places Flowplayer into the container. This demo is configured for MaxCDN which offers full support for pseudostreaming.

$f("lighty", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", {

	// configure clip to use "lighthttpd" plugin for providing video data
	clip: {
		url: 'http://vod01.netdna.com/vod/demo.flowplayer/Extremists.flv',
		provider: 'lighttpd'
	},

	// streaming plugins are configured normally under the plugins node
	plugins: {
		lighttpd: {
			url: 'flowplayer.pseudostreaming-3.1.3.swf'
		}
	}
});

If you have a lighttpd server, this works out-of-the box without any extra configuration settings for the provider. The clip just has the provider property that refers to the provider's name used in the plugins list. You can name the plugin anything you want; I've used the name 'lighttpd' above because in this example I happened to be streaming from lighttpd.

Preparing your movie files for pseudostreaming

Having FLV or H.264 available does not nessessary mean that your video files are ready for pseudostreaming. There are a few requrements for your video files. The most important thing is to have enough keyframes.

Keyframes

Keyframes are complete video frames (or images) that are inserted at consistent intervals in a video clip. The frames between the keyframes contain information on movement and scene changes that occurs between keyframes. In pseudostreaming, the user can only seek to a location where there is a complete keyframe. If you don't have enough keyframes your video is not good for seeking. Almost every encoding software can inject keyframes into video files.

In ffmpeg the number of keyframes is controlled by the g- flag. A smaller value leads to more keyframes and a larger file size. With small video files (less than 10Mb) a value such as 30 should be fine.

FLV files and metadata

If you are streaming FLV files instead of H.264 files you must have so-called FLV metadata on your file. This metadata contains the keyframe information in XML format. If this metadata is missing your video file will act like a normal HTTP progressive download.

You can inject the metadata with a small program called flvtool2. This simple command line command will do the job:

flvtool2 -U <video_file>.flv

Without this magic touch you cannot make random seeks to your FLV file. What this actually does is it makes keyframe metadata available for Flowplayer. When the user seeks in the timeline, the player retrieves the closest keyframe position from the metadata and passes it to the server. The server then serves the file starting from that position.

H.264 files and metadata

In H.264-based video formats (mp4, m4v) the metadata is called a "moov atom". The moov atom is a part of the file that holds the index information for the whole file.

Many encoding software programs such as FFMPEG will insert this moov atom information at the end of the video file. This is bad. The moov atom needs to be located at the beginning of the file, or else the entire file will have to be downloaded before it begins playing.

Fortunately, Renaun Erickson at Adobe has kindly created a small AIR application that will take a standard H.264 file and relocate the moov atom to the front of the file, and then progressive downloading works properly. Running your video file through this application makes your MP4 files ready for pseudostreaming. Of course you need to have those keyframes in place (see above).

Another good project for PHP applications is MOOV Relocator which is a well documented small library written in PHP to relocate (or move) the MOOV-Atom of MP4-Files from the end to the beginning of a file.

Configuring the query string

The default parameter the pseudostreaming provider uses for the start time is simply start. The value of this parameter holds the seek target keyframe number which is compatible with the server's streaming module. You can configure the plugin to use a different parameter name for the keyframe number. You can also add more information to the query if needed. Here we use a target variable to hold the keyframe number and add one custom property called secretToken, assuming that we have a custom server-script that implements token-based protection of video files:

plugins: {
	lighttpd: {
		url: 'flowplayer.pseudostreaming-3.1.3.swf',

		// use ${start} as a placeholder for the target keyframe
		queryString: escape('?target=${start}&secretToken=1235oh8qewr5uweynkc')
	}
}

The queryString value is escaped so that the special characters in it get passed correctly to the player.

Download

Get the latest version of the Flowplayer pseudostreaming plugin. It is compatible with all 3.0+ releases.

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.