Playlist v2.x

Adds support for playlists

Table of contents

Installation

Include the plugin next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/playlist.min.js"></script>

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

Configuration

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

API

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

Properties:

  • 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

Events

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

Available events:

  • flowplayer.playlist.events.PLAYLIST_READY - Fired when the playlist is updated. Gets the updated video queue as parameter queue
  • flowplayer.playlist.events.PLAYLIST_NEXT - Fired when the playlist advances
  • flowplayer.playlist.events.PLAYLIST_ENDED - Fired when the playlist has been finished

Example code

Standard playlist setup

var api = flowplayer.playlist('#container', {
  playlist: [
    { src: "//edge.flowplayer.org/bauhaus.mp4", title: "Bauhaus" },
    { src: "//edge.flowplayer.org/functional.mp4", title: "Functional" }
  ]
})

Hosted playlist

<!-- load standard player skin -->
<link rel="stylesheet" href="//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>
<!-- load hls script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<!-- load platform integration -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ovp.min.js"></script>

<!-- player container -->   
<div id="player_container"></div>
<!-- controls container -->
<div id="playlist_controls"></div>
<script>
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>"
})
</script>

Demos

Standard playlist

Codepen

Playlist with selection controls Codepen

Results