Playlist

This plugin adds support for playlists.

Info

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

Installation

Include the plugin next to the core player:

Copy
Copied
<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>

Configuration

The playlist elements are configured as an items: array in the configuration root src: object with the special type: "flowplayer/playlist" source type. Like standard video sources. See the code sample below.

The configuration lives under the playlist: namespace.

parameter options / example description
advance boolean true or false Whether to auto-advance to next clip. Boolean. Default: true.
delay integer 0 Seconds between clips. If larger than zero, will show a countdown screen between clips. Default 5.
loop boolean true or false Whether to loop the playlist and restart from the beginning after the last clip. Boolean. Default: false
controls string #fp-playlist-controls String selector where to, optionally, insert the visual playlist queue controller. If left blank, no UI is created. The corresponding <div> element can be placed anywhere on the page.
skip_controls boolean true or false Display playlist skip controls in the player control bar (if delay is greater than 0). Default: true
shuffle boolean true or false Setting this to true will randomize the playback order. Default: false.
start_index number 1 The index from which the playlist will start playing. Default: 0. v3.2.1+
Info

A version number tag means the paramater is only availabe from that version on. deprecated: before the tag means the feature was removed or changed from that version on.

Playlist controller

If you use the controls: configuration option, the corresponding <div> with the same name will show a visual playlist queue control element with name, description (if configured in the player), and thumbnail of each element as well as start/pause buttons.

API

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

API properties

property description
queue current playlist queue, includes idx , members, last_index
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 a player configuration object or an array of player configurations.
remove(idx) remove video at index idx
clear() clear whole queue

Properties of the queue element:

property description
idx index of currently playing video
members videos in the playlist queue
last_idx last possible index to play

API Events

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

event description
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 is finished

Sample code

Common html

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

Manual playlist configuration with full item source urls

Copy
Copied
flowplayer("#player", {
    // src configuration with special type
    src: {
        type: "flowplayer/playlist",
        items: [ { src: "//edge.flowplayer.org/bauhaus.mp4", title: "Bauhaus" },
                  {src: "//edge.flowplayer.org/functional.mp4", title: "Functional"}
                  ]
    },
    // plalyist configuration
    playlist: {
        advance: true
    },
    token: "<your token>"
})

Demos

Standard playlist

Codepen

Playlist with selection controls

Codepen