Flowplayer · Link cues

Variant of the timeline info demo with clickable links

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin.

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

For anchors to be clickable they must be positioned on top of the Flowplayer UI. The Flowplayer UI elements are positioned in the z-axis on top of the video with a CSS z-index: 11 directive. Any added clickable element must therefore have at least a z-index of 12.

<style>

In this case we have to additionally stack the cues on top of each other in reverse order of their appearance for their anchors to stay functional.

.flowplayer .info {
background-color: #333;
background-color: rgba(0, 0 , 0, 0.75);
background-image: url(//releases.flowplayer.org/7.1.2/skin/img/playful_white.png);
background-position: 110% 19px;
background-repeat: no-repeat;
padding: 15px 30px 15px 15px; /* additional right padding for "play button" */
position: absolute;
top: 50px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
font-weight: bold;
font-size: 16px;
}
.flowplayer .info a {
color: #eee;
}
.flowplayer .info a:hover {
color: #ffa500;
}
 
/* stack up links by incrementing z-index in reverse order starting from 12 */
.flowplayer.cue0 .info0 {
z-index: 18;
filter: alpha(opacity=100);
opacity: 1;
left: 50px;
}
.flowplayer.cue1 .info1 {
z-index: 17;
filter: alpha(opacity=100);
opacity: 1;
left: 80px;
}
.flowplayer.cue2 .info2 {
z-index: 16;
filter: alpha(opacity=100);
opacity: 1;
left: 110px;
}
.flowplayer.cue3 .info3 {
z-index: 15;
filter: alpha(opacity=100);
opacity: 1;
left: 140px;
}
.flowplayer.cue4 .info4 {
z-index: 14;
filter: alpha(opacity=100);
opacity: 1;
left: 170px;
}
.flowplayer.cue5 .info5 {
z-index: 13;
filter: alpha(opacity=100);
opacity: 1;
left: 200px;
}
.flowplayer.cue6 .info6 {
z-index: 12;
filter: alpha(opacity=100);
opacity: 1;
left: 230px;
}

CSS

<script>

Some extra scripting to pause the player while the user hovers over the cue:

$(function () {
var resume = false,
api = flowplayer();
 
$(".flowplayer .info").hover(function () {
resume = api.playing;
if (resume) {
api.pause();
}
}, function () {
if (resume) {
api.resume();
}
});
});

JavaScript

<body/>

<div class="flowplayer"
data-cuepoints="[2, 4, 8, 12, 14, 16, 20]">
 
<video>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/trains.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/trains.mp4">
</video>
 
<div class="info info0">
<a href="https://flowplayer.com" target="_blank">Flowplayer Home</a>
</div>
<div class="info info1">
<a href="https://flowplayer.com/designer/" target="_blank">Flowplayer Designer</a>
</div>
<div class="info info2">
<a href="https://flowplayer.com/v6docs/skinning.html" target="_blank">Flowplayer Skinning</a>
</div>
<div class="info info3">
<a href="https://flowplayer.com/v6docs/cuepoints.html" target="_blank">Flowplayer Cuepoints</a>
</div>
<div class="info info4">
<a href="https://flowplayer.com/v6/standalone/timeline/info.html" target="_blank">This demo without links</a>
</div>
<div class="info info5">
<a href="https://flowplayer.com/pricing/#license-key" target="_blank">Flowplayer License</a>
</div>
<div class="info info6">
<a href="https://flowplayer.com/v6/standalone/complete.html" target="_blank">Your own Logo</a>
</div>
 
</div>

HTML