Playlist

Adds support for playlists

Installation

Include the plugin next to the core player:

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

Configuration

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

Configuration properties:

• playlist - Array of player configuration objects
• advance - Whether to auto-advance to next clip. Default false
• delay - Seconds between clips. If larger than zero will show an countdown screen between clips. Default 0.
• 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.

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.PLAYLIST_READY - Fired when the playlist is updated. Gets the updated video queue as parameter queue
• flowplayer.playlist.PLAYLIST_NEXT - Fired when the playlist advances
• flowplayer.playlist.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/stable/style/flowplayer.css">
<!-- load player script -->
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<!-- load playlist plugin -->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/playlist.min.js"></script>
<!-- load hls script -->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
<!-- load platform integration -->
<script src="//cdn.flowplayer.com/releases/native/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