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>
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 booleantrue 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.
-
loopbooleantrue 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.
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
-
-
queue - Current playlist queue, includes
idx , members, last_index
-
play(idx)- Play video at index
idx
-
-
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:
-
-
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:
-
-
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