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.

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 generally assume you're using the Wowza Flowplayer CDN to embed the player in your site. If you're using npm, see our npm instructions or our TypeScript guide .

Install the plugin

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

<!-- 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 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>

// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import playlist plugin and optional plugins
import Playlist from "@flowplayer/player/plugins/playlist";
import HLS from "@flowplayer/player/plugins/hls";
import OVP from "@flowplayer/player/plugins/ovp";

Add HTML elements

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

<div id="player"></div>
<div id="fp-playlist-controls"></div>

To position the playlist to the right or left of the player, use these CSS helper classes instead:

<div class="fp-playlist-layout right">
  <div id="player"></div>
  <div id="fp-playlist-controls"></div>
</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.

Add a standard playlist

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

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-player-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 where the playlist controller appears to the right of the player, see this example.

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. To understand even handling differences between CDN or npm implementations, see Plugin events.

Example

In this example, we capture when the viewer advances to the next video in the playlist and output the next_index value to the console. A message is also added to the console when the entire playlist ends.

player.on(flowplayer.playlist.events.PLAYLIST_NEXT, (event) => {
  console.log(event.detail.next_index);
});

player.on(flowplayer.playlist.events.PLAYLIST_ENDED, (event) => {
  console.log("Playlist finished.");
});

player.on(Playlist.events.PLAYLIST_NEXT, (event) => {
  console.log(event.detail.next_index);
});

player.on(Playlist.events.PLAYLIST_ENDED, (event) => {
  console.log("Playlist finished.");
});

Manage the plugin

You can use the properties and methods described in this section to interact with our API and manage the Playlist plugin and video playback. The Playlist API lives under the playlist namespace in the Player API.

Properties

These properties can be used to retrieve information about the current state of the plugin and to modify the plugin's behavior.

Methods

These methods allow you to work with the plugin and perform specific actions to control the plugin's behavior.