Playlist plugin

The Playlist plugin adds support for player playlists. With playlists, you can organize related videos into a cohesive sequence, making it easier to manage large amounts of content. Users can quickly navigate through videos in a structured way without having to search for individual items. Overall, this user experience can provide a sense of continuity.

To see the Playlist plugin in action, view this demo of a playlist with selection controls. You can also add a standard playlist without selection controls.

Info

This documentation applies to Wowza Flowplayer Native v3.x. In previous releases, playlists were not implemented with a source loader but with a special initialization.

Before you start

Before you use this plugin with the standalone player, we recommend the following steps:

Read about embedding the core player in your site by adding the minimum CSS and JavaScript player components.
Make sure you have a player token. For more, see Token configuration . Tokens aren't needed for local development.
The instructions on this page assume you're using the Wowza Flowplayer CDN to embed the player in your site.

Install the plugin

To install the Playlist plugin, load it next to the core player:

Copy

Copied

<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<!-- Load playlist plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/playlist.min.js"></script>
<!-- Add optional plugins -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ovp.min.js"></script>

Add HTML elements

Add the HTML components to render the player elements on your page:

Copy

Copied

<div id="player"></div>
<!-- Add to display playlist controller -->
<div id="controls"></div>
<div id="fp-playlist-controls"></div>

Configure the plugin

The plugin can be set up at the top-level configuration under the playlist namespace. Playlist elements are configured as an items array in the configuration root src object, with the special type: "flowplayer/playlist source type. This is similar to how standard video sources are configured.

Property	Example	Description
`advance` boolean	`true` or `false`	Determines if the player should auto-advance to the next clip. Default value is `true`.
`delay` integer	`0`	Defines the time in seconds between clips. If larger than zero, a contain screen displays between clips. Default value is `5`.
`loop` boolean	`true` or `false`	Determines if the playlist should loop and restart from the beginning after the last clip. Default value is `false`.
`controls` string	`#fp-playlist-controls`	Adds a string selector that defines where to optionally insert the visual playlist queue controller. If left blank, no playlist queue is created. The corresponding `<div>` element can be placed anywhere on the page.
`skip_controls` boolean	`true` or `false`	Displays playlist skip controls in the player control bar if `delay` is set to greater than 0. Default value is `true`.
`shuffle` boolean	`true` or `false`	Randomizes the playback value when set to `true`. Default value is `false`.
`start_index` number	`1`	Specifies the index from which the playlist will start playing. Default value is `0`. Available with v3.2.1+.

Info

A version number tag means the parameter is only available from that version on. The deprecated text before the tag means the feature was removed or changed from that version on.

Add a standard playlist

The following example configures the player using a standard playlist without selection controls. Three different playlist items are included.

Copy

Copied

const player = flowplayer('#player', { 
  src: {
        type: "flowplayer/playlist",
        items: [{ 
          src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
          title: "For Bigger Blazes",
          description: "HBO GO now works with Chromecast, the easiest way to enjoy online video on your TV.",
          poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg"
        },
        { 
          src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
          title: "For Bigger Escapes",
          description: "Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for when Batman's escapes aren't quite big enough.",
          poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg"
        },
        { 
          src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
          title: "For Bigger Joyrides",
          description: "Introducing Chromecast. The easiest way to enjoy online video and music on your TV.",
          poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg"
        }
      ]},
  playlist: {
    advance: true, // Auto-advance playlist
    delay: 10, // 15 seconds between clips
    skip_controls: true
  },
  token: "[your-token]"
})

Add a playlist controller

If you use the controls configuration option, the corresponding <div> tag with the same name shows a visual playlist queue control element with name, description (if configured in the player), and thumbnail for each item in the playlist queue. For a full demo, see this example.

Advanced configurations

The Playlist API lives under the playlist namespace in the Player API.

Property	Description
`queue`	Exposes the current playlist queue, including its `idx`, `members`, `last_index` properties. `idx` defines the index of the video currently playing. `members` defines the videos in the playlist queue. `last_idx` specifies the last possible index to play.
`play(idx)`	Plays the video at index `idx`.
`next()`	Plays the next video.
`prev()`	Plays the previous video.
`push(member)`	Pushes a new video to the queue. Accepts either a player configuration object or an array of player configurations.
`remove(idx)`	Remove video at index `idx`.
`clear()`	Clear whole queue.

Listen to plugin events

This section describes the events you can capture to control and manage the playlist that's used with your player instance.

CDN event	Description
`flowplayer.playlist.events.PLAYLIST_READY`	Fires when the playlist is updated. Gets the updated video queue as parameter `queue`.
`flowplayer.playlist.events.PLAYLIST_NEXT`	Fires when the playlist advances.
`flowplayer.playlist.events.PLAYLIST_ENDED`	Fires when the playlist is finished.