
Developers
Player plugins
Developers
Player plugins
Adds cuepoint support to native player.
Load 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/cuepoints.min.js"></script>
Player and plugins exist in different release versions. Please see the release channel documentation.
To enable the plugin in the async cloud player, declare it in the "plugins": []
config object with cuepoints
.
You can configure the plugin with top level configuration option cuepoints
. cuepoints
accepts an array of Json-objects that must contain at least start
and end
properties which represents the start and end time, in seconds, for each cuepoint.
Cuepoints can be added to the timeline as <span>
on the timeline-element and are stylable with class fp-cuepoint
, by using the top level configuration property draw_cuepoints
. The cuepoints are transparent and without any styling at start. The sample below demostrates how to style cuepoints with simple CSS.
Properties:
cuepoints
- An array with currently used cuepointsevents
- Events that can be listened to or fired
CUEPOINTS
- When new cuepoints addedCUEPOINT_START
- When start time for a cuepoint is passedCUEPOINT_END
- When end time or a cuepoint is passedAdding and removing cuepoints while playing can done by modifying the player's cuepoints
-property using ordinary array methods. Adding a new cuepoint can for example be done with push
:
api.cuepoints.push({start: 1, end: 3})
Note that communicating with the cuepoints
-property do not trigger redrawing of cuepoints on the timeline. To trigger redraw you need to trigger the CUEPOINTS
-event:
api.emit(
flowplayer.event.CUEPOINTS,
{ cuepoints: api.cuepoints.concat({start: 1, end: 3}) }
);
//JavaScript
var api = flowplayer('#container', {
src: "https://edge.flowplayer.org/bauhaus.m3u8"
, cuepoints: [
{start: 0.5, end:3, msg: "Cuepoint 1"}
, {start: 5, end:7, msg: "Cuepoint 2"}
, {start: 10, end:15, msg: "Cuepoint 3"}
, {start: 20, end:24, msg: "Cuepoint 4"}
]
, draw_cuepoints: true
})
api.on(api.events.CUEPOINT_STARTED, function(e) {
console.log('Cuepoint started', e.data.cuepoint.msg);
})
api.on(api.events.CUEPOINT_ENDED, function(e) {
console.log('Cuepoint ended');
})
//CSS
.fp-cuepoint {
background-color: #00ABCD !important;
height: 100%;
cursor:pointer;
width: 5px;
}
Codepen
Live streaming
Live analytics
Ad scheduling
Monetization