Playlist

Adds support for playlists.

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 false
    • delay integer
    • 0
    • Seconds between clips. If larger than zero will show an countdown screen between clips. Default 0.
    • 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.

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

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

By using this website you agree to our privacy policy
Results