Playlist

Adds support for playlists.

Table of contents

This documentation applies to Flowplayer Native v3.x . In previous releases, playlists were not implemented with a source loader but a special initiliazation. If you need to stay with v2.x , please see the legacy playlist plugin refernce

Manual Javascript setup

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.

OVP managed players

The embed code genreator will inlcude the plugin whenever you embed a playlist; in async Javascipt embeds you can also manually load it in the "plugins": [] array. For OVP playlist management, please see the platfomr playlist guide.

Configuration

The playlist elements are configured as a 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 an countdown screen between clips. Default 5.
    • loopboolean
    • 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 that 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+

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

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

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 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 has been finished

Sample code

common html

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

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>"
})

Hosted playlist

<script>
flowplayer("#player_container", {    
// src is the id of the dynamic or manual playlist
src: "dxxxxb-xxx5-xx4-xx18-xxxxxxxx9",
playlist: {
        // 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>

Manual playlist setup with OVP videos

flowplayer("#player", {
    // src configuration with special type
    src: {
        type: "flowplayer/playlist",
        // sources are OVP videoids, requires OVP plugin to be loaded
        items: [ {src: "8954ee45-f8bd-4f3b-9521-a6a01e88b91b"},
                  {src: "03e57a8d-2432-4aa7-ad92-cb8e670429e4"}
                  ]
    },
    // plalyist configuration
    playlist: {
        advance: true
    },
    token: "<your token>"
})

Demos

Standard playlist

Codepen

Playlist with selection controls

Codepen

OVP (platform integration) Animated previews
Results