Flowplayer · Seek by time

Two buttons to seek forwards and backwards by 10 seconds respectively are prepended to the controlbar

Video courtesy of Figs In Wigs

The seek(boolean flag) method, also triggered by typing the left or right arrow keys seeks backwards or forward by 10% of the video duration. This demo adds functionality and interface to jump seek back or forward by 10 seconds.

<head/>

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

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.1.0/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

<style>

/* grey out seek buttons while they are no-ops */
.flowplayer .fp-backward.is-disabled,
.flowplayer .fp-forward.is-disabled {
color: #999 !important;
}
 
#player {
background-image: url(http://demos.flowplayer.org/media/img/figsinwigs.jpg);
}

CSS

<script>

flowplayer(function (api, root) {
if (!flowplayer.support.inlineVideo) {
return;
}
 
// common, bean: helper functions provided by Flowplayer API
var common = flowplayer.common,
bean = flowplayer.bean,
bw = common.createElement("strong", {"class": "fp-backward"}, "-10"),
fw = common.createElement("strong", {"class": "fp-forward"}, "+10");
 
bean.on(bw, "click", function () {
var target = api.video.time - 10;
if (target >= 0 && !api.seeking) {
api.seek(target);
}
});;
 
bean.on(fw, "click", function () {
var video = api.video,
target = video.time + 10;
if (target <= video.duration && !api.seeking) {
api.seek(target);
}
});;
 
[fw, bw].forEach(function (el) {
common.prepend(common.find(".fp-controls")[0], el);
});
 
api.on("progress", function (e, api) {
var video = api.video,
vtime = video.time;
common.toggleClass(bw, "is-disabled", vtime < 10);
common.toggleClass(fw, "is-disabled", vtime > video.duration - 10);
});
});
 

// ensure that DOM is ready
window.onload = function () {
 
flowplayer("#player", {
ratio: 9/16,
clip: {
hlsjs: {
safari: true
},
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.mp4" }
]
}
});
 
};

JavaScript

<body/>

<div id="player" class="is-splash"></div>

HTML