This is a message.

Make Flowplayer understand F4M manifest files

The F4M plugin is used to parse Adobe F4M manifest files so that the referenced media files can be played back in Flowplayer. The F4M format is similar to the SMIL format, it can be configured for multi bitrate streaming and it includes extra information for DVR/DRM and Adobe Http Streaming.

More Information:

Features:

  • Adobe HTTP Streaming manifest support.
  • RTMP Streaming with manifest playlist support.
  • Adobe Live DVR HTTP Streaming manifest support for live video.
  • Multi bitrate support to be used with the bitrate detection plugin.

How does this work?

Here is an example of a simple F4M manifest file:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns="http://ns.adobe.com/f4m/1.0">
<id>bbb</id>
<duration>653</duration>
<baseURL>rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st</baseURL>
<urlIncludesFMSApplicationInstance>true</urlIncludesFMSApplicationInstance>
<media url="mp4:bbb-800"/>
</manifest>

F4M

The baseURL element contains the netConnectionUrl to be used to connect to the streaming server. For rtmp connections which have an application instance in the url like with Cloudfront CDN, the urlIncludesFMSApplicationInstance config is required. The media element contains the stream name. The F4M plugin takes these two values and combines them to create the complete URL for the stream. Since we are working with RTMP here we also need the RTMP plugin in our configuration.

HTML Setup

We use an anchor tag as the player container. The video URL is specified in the href attribute. Notice that this is a .f4m file.

<a id="f4mplayer" href="/demos/standalone/plugins/streaming/bbb.f4m"
style="display:block;width:660px;height:350px;">
</a>

HTML

Flowplayer configuration

Here is a configuration for this demo:

flowplayer("f4mplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
plugins: {
 
// the F4M plugin is here
f4m: { url: "flowplayer.f4m-3.2.10.swf" },
 
// .. and RTMP streaming plugin here
rtmp: { url: "flowplayer.rtmp-3.2.13.swf" }
},
 
clip: {
provider: 'rtmp'
},
log: {
level: 'debug',

// in development you can enable logging to see what happens.
// the output goes to the browser's developer console
filter: 'org.flowplayer.f4m.*, org.flowplayer.rtmp.*'
}
});

JavaScript

Examples with bitrate selection and adaptive bitrate streaming

Take a look at the HTTP streaming plugin documentation for examples on bitrate selection and adaptive bitrate streaming.

Here is an example of a F4M manifest file containing metadata for two bitrates:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns="http://ns.adobe.com/f4m/1.0">
<id>bbb</id>
<duration>653</duration>
<baseURL>rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st</baseURL>
<urlIncludesFMSApplicationInstance>true</urlIncludesFMSApplicationInstance>
<media url="mp4:bbb-400" bitrate="400" width="320"/>
<media url="mp4:bbb-800" bitrate="800" width="480"/>
</manifest>

F4M

Plugin configuration options

property / datatypeDefaultDescription

dvrBufferTime

4

Buffer time used for a detected Live DVR stream.

dvrDynamicBufferTime

4

Buffer time used for a detected Live Multi-bitrate DVR stream.

dynamicBufferTime

4

Buffer time used for a detected Multi-bitrate stream.

liveBufferTime

4

Buffer time used for a detected Live stream.

liveDynamicBufferTime

4

Buffer time used for a detected Live Multi-bitrate stream.

includeApplicationInstance

False

For RTMP connections that have application instance connections like with Cloudfront CDN, parse the F4M manifests with configured baseURL RTMP connections with it's instance so the filenames are obtained correctly. This can be configured here or in the F4M manifest file using the urlIncludesFMSApplicationInstance tag.

version

1

Which version of the F4M manifest specification is used. Must be set to 2 for multi-bitrate master manifests which do not conatain any packaging information, but only link to separate manifests. Indicated by 2.0 in last part of the xmlns property of the manifest tag.

Download

flowplayer.f4m-3.2.10.swf

just the working flash file to get you going

flowplayer.f4m-3.2.10.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.f4m-3.2.10-src.zip

source code

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

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.