Playlist

<div id="default-playlist"
class="flowplayer"
data-splash="true"
data-hls-qualities="false"
data-aspect-ratio="16:9">
 
<video>
<source type="application/x-mpegurl"
src="//edge.flowplayer.org/night1.m3u8">
<source type="video/mp4"
src="//edge.flowplayer.org/night1.mp4">
</video>
 
<a class="fp-prev"></a>
<a class="fp-next"></a>
 
<div class="fp-playlist">
<a href="//edge.flowplayer.org/night1.mp4"></a>
<a href="//edge.flowplayer.org/night2.mp4"></a>
<a href="//edge.flowplayer.org/night3.mp4"></a>
<a href="//edge.flowplayer.org/night4.mp4"></a>
<a href="//edge.flowplayer.org/night5.mp4"></a>
<a href="//edge.flowplayer.org/night6.mp4"></a>
<a href="//edge.flowplayer.org/night7.mp4"></a>
</div>
 
</div>

HTML

view standalone page

Flowplayer playlist features include:

  • A default playlist interface design out of the box - see demo above. It can be disabled in favour of infinite possibilites to create your own.
  • The playlist element is nested inside the container so you can style it differently depending on the player state.
  • By default the playlist entries are anchor tags inside a tag with CSS class name .fp-playlist. A user without JavaScript support can still see the videos by clicking on the link.
  • You can use autoplay or a splash setup just like when you are not using a playlist.
  • If Analytics is enabled each video is tracked separately.
  • You can have several playlists on one page.
  • When a playlist is configured the next(), prev() and play(index) methods are available from the API. Additionally the index and is_last properties are available from the video object.

Installation

As with single videos, Flowplayer installations with playlists can be divided into 2 basic categories:

Video tag based

Here is a typical setup for a playlist for a VIDEO tag based playlist installation:

<div class="flowplayer is-splash">
 
<!-- initial clip -->
<video>
<source type="application/x-mpegurl"
src="//mydomain.com/video1.m3u8">
<source type="video/mp4"
src="//mydomain.com/video1.mp4">
</video>
 
<!-- playlist root -->
<div class="fp-playlist">
 
<!-- playlist entries or "trigger" elements -->
<a href="//mydomain.com/video1.mp4"></a>
<a href="//mydomain.com/video2.mp4"></a>
<a href="//mydomain.com/video3.mp4"></a>
<a href="//mydomain.com/video4.mp4"></a>
</div>
 
<!-- optional prev/next buttons -->
<a class="fp-prev"></a>
<a class="fp-next"></a>
 
</div>

HTML

The initial clip is configured with multiple formats (HLS, MP4). The playlist assumes that all playlist entries are delivered via HTTP and have the same formats available and obey the same file naming scheme.

Advantages of VIDEO tag based playlist installations:

  • Optional content and customization of the trigger elements is easier to set up. In a JavaScript installation you would have to generate this dynamically.
  • The same as for VIDEO tag based installations in general.

Restrictions of VIDEO tag based installations:

  • All playlist entries must obey the same file naming scheme as the first entry.
  • video/flash type sources delivered via RTMP are not allowed.
  • The same as for VIDEO tag based installations in general.

Pure JavaScript

In a JavaScript playlist installation the playlist option is mandatory and replaces the clip option for players with single videos with an array of clip objects.

var allVideos = [{
sources: [{
type: 'video/webm',
src: "//edge.flowplayer.org/night7.webm"
}, {
type: 'video/mp4',
src: "//edge.flowplayer.org/night7.mp4"
}, {
type: 'video/flash',
src: "mp4:night7"
}]
}, {
sources: [{
type: 'video/webm',
src: "//edge.flowplayer.org/night5.webm"
}, {
type: 'video/mp4',
src: "//edge.flowplayer.org/night5.mp4"
}, {
type: 'video/flash',
src: "mp4:night5"
}]
}, {
sources: [{
type: 'video/webm',
src: "//edge.flowplayer.org/night6.webm"
}, {
type: 'video/mp4',
src: "//edge.flowplayer.org/night6.mp4"
}, {
type: 'video/flash',
src: "mp4:night6"
}]
}, {
sources: [{
type: 'video/webm',
src: "//edge.flowplayer.org/night4.webm"
}, {
type: 'video/mp4',
src: "//edge.flowplayer.org/night4.mp4"
}, {
type: 'video/flash',
src: "mp4:night4"
}]
}];

JavaScript

The collection of clips above is taken from our JavaScript playlist demo. Storing it in a variable like above allows for flexible handling of the entries. The playlist is ready to be used right away for a JavaScript installation into a prepared container:

<div  id="jsplaylist">
<!-- optional prev/next buttons -->
<a class="fp-prev"></a>
<a class="fp-next"></a>
</div>
 
<script>
flowplayer('#jsplaylist', {
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
playlist: allVideos
});
</script>

HTML

Upon installation a html structure similar to the one shown above will be generated.

In the referenced demo you can observe how this approach facilitates the interactive creation of different playlists by user choice. An example where this installation method shows its strengths.

Advantages of JavaScript playlist installations:

  • Complete flexibility regarding the locations of the sources.
  • RTMP streams can be configured as sources of type video/flash.
  • Not all source types of the first entry must also be available for all other entries. While this is recommended for all playlists regardless of the installation method, there are situations where this can come in handy, like mixing video on demand and live streams.

CSS classes

Interface

  • fp-default-playlist - this state class is added to the container element when the default playlist design is in use
  • fp-custom-playlist - this state class is added to container element when the customPlaylist option is true - the class can also be added to the container as configurable state.

States

A "video{clip_index}" CSS class name will be assigned to the root element and a "is-active" CSS class is given to the currently active trigger. For example

<div class="flowplayer video1">
 
<div class="fp-playlist">
<a href="//mydomain.com/video1.mp4"></a>
<a href="//mydomain.com/video2.mp4" class="is-active"></a>
<a href="//mydomain.com/video3.mp4"></a>
<a href="//mydomain.com/video4.mp4"></a>
</div>
 
</div>

HTML

You can for example show/hide HTML inside the player based on which clip is being played.

.flowplayer.video1 .info1 {
display: block;
}

CSS

A convenience class last-video represents the last clip. For example:

.last-video.is-finished {
/* do your marketing magic */
}

CSS

Configuration

Player options

The playlist behaviour is configured at the top level of the configuration object. The following options are available:

optiondefault valuedescription
active"is-active"The CSS class name assigned to the trigger element referencing the currently loaded clip.
advancetruePlay the next clip when the current one is finished and stop when last clip ends.
customPlaylistfalseIf set to true the default playlist UI is disabled in favour of a custom made one. See our playlist demos for various examples.
Same as adding the fp-custom-playlist state class to the container element.
loopfalseContinue from the first clip when last clip ends.
playlistarrayAn array of clip objects.
Not allowed in a VIDEO tag based installation.
query".fp-playlist a"jQuery selector for trigger elements.
Not allowed in a pure JavaScript installation.
If the query selects a playlist element with a unique id, like "#my-playlist a", this element can be located anywhere on the page outside the player container.
startIndex0Zero-based index of playlist item from which playback starts - view demo.

Except for playlist, all options can also be specified as data-attributes in a VIDEO tag based installation.

Clip options

Clip options are used to configure each playlist item.

In video tag based installations the data-attribute is added to the trigger element of the playlist item (demo showing data-title).

optiondefaulthtml syntax description
flashlsObjectFlash (HLS) only. The flashls object.
Cannot be set in HTML syntax.
loopfalsedata-loopWhether this clip should play again automatically on finish.
For loop playback of the playlist use the loop option at player level.
livefalsedata-liveWhether this clip is a live stream.
rtmpObjectFlash (RTMP) only. When specified in JavaScript object notation: the rtmp object. See this section for how this option is handled in playlists.
Not allowed in HTML syntax.
rtmpFlash (RTMP) only. When specified as String: Address of the Flash RTMP server. See this section for how this option is handled in playlists.
Not allowed in HTML syntax.
sourcesArrayA list of video formats. Refer to source options for parameters and detailed descriptions.
In HTML syntax: the href attribute of the trigger elements.
titledata-titleSets a title for this clip. Displayed in a top bar when hovering over the player.
Caveat: Has no visible effect in conjunction with the aside-time skin modifier class.

RTMP

RTMP options must be set for each clip of a playlist if:

  • the clips of a playlist are served from different RTMP servers or
  • require different RTMP options or
  • the playlist contains sources of type "video/flash" which are not served via RTMP

Extension and plugin clip options

These options are undefined by default but are supported by the referenced extensions or plugins.

The rightmost column indicates whether the option can also be set as data attribute in a VIDEO tag based playlist installation as custom data-attribute of a playlist "trigger" element.

optionkindextension/pluginhtml configurable
audioBooleanAudio pluginyes
coverImageStringAudio pluginyes
cuepointsArrayCuepoints extensionrestricted
dashQualitiesArraydashjs pluginrestricted
dashQualitiesBooleandashjs pluginyes
defaultQualityStringVOD quality selector pluginyes
hlsjsObjecthlsjs pluginno
hlsQualitiesArrayhlsjs pluginrestricted
hlsQualitiesBooleanhlsjs pluginyes
imaObjectAdSense pluginno
imaObjectVAST pluginno
qualitiesArrayVOD quality selector pluginno
qualitiesStringVOD quality selector pluginyes
subtitlesArraySubtitle extensionno
thumbnailsObjectthumbnails pluginno

JavaScript API

Video object

The playlist extension adds the following properties to the video object:

propertydefault valuedescription
indexintegerThe zero based index of the current clip in the playlist.
is_lastFalseWhether the current clip is the last one in the playlist.

Methods

The playlist extension provides the following methods for the player API:

methoddescription
addPlaylistItem(clip)Appends the clip object given in the argument to the current playlist.
next()Advances to the next clip in the playlist. Same effect as a click on the next link.
play(index)Plays the clip at the given zero based index in a playlist. For example: play(0) plays the first clip.
prev()Jumps to the previous clip previous clip in the playlist. Same effect as a click on the prev link.
removePlaylistItem(index)Removes the clip object at given index in the current playlist from the playlist.
setPlaylist(array)Similar to the load method, but takes a JavaScript playlist as argument and does not have a callback.

Migration from Version 6

As the player is now shipped with a builtin default playlist design, a custom playlist layout must be announced with the customPlaylist option.