
Developers
Player plugins
Developers
Player plugins
Adds support for playlists
Include the plugin next to the core player:
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/playlist.min.js"></script>
Player and plugins exist in different release versions. Please see the release channel documentation.
When using the flowplayer.playlist()
initializer you pass the configuration options on
top level configuration.
Configuration properties:
playlist
- Array of player configuration objectsadvance
- Whether to auto-advance to next clip. Default false
delay
- Seconds between clips. If larger than zero will show an countdown screen between clips. Default 0
.controls
- String selector where to optionally insert playlist queue controller. If left blank no UI is created.skip_controls
- Display playlist skip controls in the player control bar.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
The Playlist API lives under playlist
namespace in the Player API.
Properties:
queue
- Current playlist queue. Properties:
idx
- Index of currently playing videomembers
- Videos in the playlist queuelast_idx
- Last possible index to playplay(idx)
- Play video at index idx
next()
- Play next videoprev()
- Play previous videopush(member)
- Push a new video to the queue. Accepts either an player configuration object or an array of player configurations.remove(idx)
- Remove video at index idx
clear()
- Clear whole queuePlaylist related events can be found from flowplayer.playlist.events
and listened to using normal event listeners.
Available events:
flowplayer.playlist.PLAYLIST_READY
- Fired when the playlist is updated. Gets the updated video queue as parameter queue
flowplayer.playlist.PLAYLIST_NEXT
- Fired when the playlist advancesflowplayer.playlist.PLAYLIST_ENDED
- Fired when the playlist has been finishedvar api = flowplayer.playlist('#container', {
playlist: [
{ src: "//edge.flowplayer.org/bauhaus.mp4", title: "Bauhaus" },
{ src: "//edge.flowplayer.org/functional.mp4", title: "Functional" }
]
})
<!-- load standard player skin -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
<!-- load player script -->
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<!-- load playlist plugin -->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/playlist.min.js"></script>
<!-- load hls script -->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
<!-- load platform integration -->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/ovp.min.js"></script>
<!-- player container -->
<div id="player_container"></div>
<!-- controls container -->
<div id="playlist_controls"></div>
<script>
flowplayer("#player_container", {
// src is the id of the dynamic or manual playlist
src: "dxxxxb-xxx5-xx4-xx18-xxxxxxxx9"
// 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>
Standard playlist
Codepen
Playlist with selection controls
Codepen
Live streaming
Live analytics
Ad scheduling
Monetization