Playlist

[View standalone page]({{ config.flowplayer7.standalonedemos }}/playlist/default)

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]({{ config.flowplayer7.demos }}/playlist/).
• 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 installations
• pure JavaScript installations

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>

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"
    }]
}];

The collection of clips above is taken from our (JavaScript playlist demo)[../standalone/playlist/javascript]. 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>

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

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 livestreams]({{ config.flowplayer7.demos }}/playlist/vodpreroll-livefeature.html).

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>

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

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

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

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

Next and prev links

Anchors with "fp-prev" and "fp-next" class names will move forward and backward on the playlist. For example

<div class="flowplayer fp-custom-playlist">

   <video>
      <source type="application/x-mpegurl" src="//mydomain.com/my-video.m3u8">
      <source type="video/mp4"             src="//mydomain.com/my-video.mp4">
   </video>

   <div class="fp-playlist">
      <a href="//mydomain.com/my-video.mp4"></a>
      ...
   </div>

   <a class="fp-prev">prev</a>
   <a class="fp-next">next</a>
</div>

Configuration

Player options

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

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

{{ important('Caveat', 'Do not use the loop VIDEO tag attribute in conjunction with playlists.') }}

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.

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][playlistVideoTag] as custom data-attribute of a playlist "trigger" element.

JavaScript API

Video object

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

Methods

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

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.