Cuepoints demo
Demonstrates the use of cuepoints for custom overlays at specific times
Sample implementation
#custom-msg {
background-color: rgba(0,0,0,0.8);
padding: .3rem .6rem;
border-radius: 2px;
position: absolute;
display: none;
width: unset
}
function cue (startTime, endTime, msg) {
return {startTime, endTime, msg}
}
var config = {
src: 'f576651c-4cc6-4664-84fa-bb3b35ef1aba'
//Add cuepoints to player
, cuepoints: [
cue(0.5, 3, "First")
, cue(5, 7, "Second")
, cue(10, 16, "Third")
, cue(20, 24, "Fouth")
]
}
//Init player
window.player = flowplayer('#player', config);
/** Add div with message into the player **/
const msg = document.createElement("div")
msg.textConetnt
window.msg= document.createElement("div")
msg.textContent = "Inside a Cuepoint"
msg.id = "custom-msg"
player.root.querySelector(".fp-middle").prepend(msg)
player.on(flowplayer.events.CUEPOINT_START, function (e) {
//Change msg below the player
var {cuepoint} = e.data;
//Display msg when entering a cuepoint
msg.style.display = "block";
msg.innerText = cuepoint.msg + " cuepoint";
});
player.on(flowplayer.events.CUEPOINT_END, function (e) {
//Hide msg when leaving a cuepoint
msg.style.display = "none";
});
Libraries
<!-- <head> -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />
<!-- <body> -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/cuepoints.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ovp.min.js"></script>HTML code
<div id="player">/</div>CSS code
#custom-msg {
background-color: rgba(0,0,0,0.8);
padding: .3rem .6rem;
border-radius: 2px;
position: absolute;
display: none;
width: unset
}Javascript
<script>
function cue (startTime, endTime, msg) {
return {startTime, endTime, msg}
}
// player configuration
var config = {
// use your own token in production
token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w"
, src: 'f576651c-4cc6-4664-84fa-bb3b35ef1aba'
//Add cuepoints to player
, cuepoints: [
cue(0.5, 3, "First")
, cue(5, 7, "Second")
, cue(10, 16, "Third")
, cue(20, 24, "Fouth")
]
}
//Init player
window.player = flowplayer('#player', config);
/** Add div with message into the player **/
const msg = document.createElement("div")
msg.textConetnt
window.msg= document.createElement("div")
msg.textContent = "Inside a Cuepoint"
msg.id = "custom-msg"
player.root.querySelector(".fp-middle").prepend(msg)
player.on(flowplayer.events.CUEPOINT_START, function (e) {
//Change msg below the player
var {cuepoint} = e.data;
//Display msg when entering a cuepoint
msg.style.display = "block";
msg.innerText = cuepoint.msg + " cuepoint";
});
player.on(flowplayer.events.CUEPOINT_END, function (e) {
//Hide msg when leaving a cuepoint
msg.style.display = "none";
});
</script>