Playlist v2.x

Adds support for playlists


Include the plugin next to the core player:

<script src="//"></script>
<script src="//"></script>

Player and plugins exist in different release versions. Please see the release channel documentation.


When using the flowplayer.playlist() initializer you pass the configuration options on top level configuration.

Configuration properties:

  • playlist - Array of player source configuration objects
  • advance - Whether to auto-advance to next clip. Boolean. Default false
  • delay - Seconds between clips. If larger than zero will show an countdown screen between clips. Default 0.
  • loop - Whether to loop the playlist and restart from the beginning after the last clip. Boolean. Default: false
  • controls - String selector where to optionally insert playlist queue controller. If left blank no UI is created.
  • skip_controls - Display playlist skip controls in the player control bar.
  • shuffle- Setting this to true will randomize the playback order. Boolean. Default: false.

You can also use the playlist plugin with platform playlists using the platform integration plugin along with the playlist media_id. In this case you'll initialize it with src: instead of playlist: as shown in the hosted playlist demo


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


  • queue - Current playlist queue. Properties:
    • idx - Index of currently playing video
    • members - Videos in the playlist queue
    • last_idx - Last possible index to play
  • play(idx) - Play video at index idx
  • next() - Play next video
  • prev() - Play previous video
  • push(member) - Push a new video to the queue. Accepts either an player configuration object or an array of player configurations.
  • remove(idx) - Remove video at index idx
  • clear() - Clear whole queue


Playlist related events can be found from and listened to using normal event listeners.

Available events:

  • - Fired when the playlist is updated. Gets the updated video queue as parameter queue
  • - Fired when the playlist advances
  • - Fired when the playlist has been finished

Example code

Standard playlist setup

var api = flowplayer.playlist('#container', {
  playlist: [
    { src: "//", title: "Bauhaus" },
    { src: "//", title: "Functional" }

Hosted playlist

<!-- load standard player skin -->
<link rel="stylesheet" href="//">
<!-- load player script -->
<script src="//"></script>
<!-- load playlist plugin -->
<script src="//"></script>
<!-- load hls script -->
<script src="//"></script>
<!-- load platform integration -->
<script src="//"></script>

<!-- player container -->   
<div id="player_container"></div>
<!-- controls container -->
<div id="playlist_controls"></div>
flowplayer("#player_container", {    
// src is the id of the dynamic or manual playlist
src: "dxxxxb-xxx5-xx4-xx18-xxxxxxxx9"
// define controls container
, controls: "#playlist_controls"
// show skip controls to advance in the playlist without using the playlist below the player
, skip_controls : true
// you player token
,token: "<your token>"


Standard playlist


Playlist with selection controls Codepen