Playlist plugin

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