Flowplayer · Disable seeking

Seeking is disabled while the remaining API is still available.

<head/>

<style>

.flowplayer {
background-color: #333;
margin-bottom: 30px;
}
 
/* override cursor: col-resize */
.flowplayer .fp-buffer, .flowplayer .fp-progress {
cursor: default;
}

CSS

<script>

Preventing the seek in the beforeseek event suffices with regard to functionality. We add some fine tuning of the visual aspect which cannot be done with CSS alone to communicate to the user that the restriction is intentional.

For devices which do support inline playback the beforeseek event is available. Workaround: Revert the seek which just happened.

flowplayer(function (api, root) {
 
if (flowplayer.support.inlineVideo) {
// standard seek prevention, also via keyboard
api.on("beforeseek", function (e) {
e.preventDefault();
});
 
// prevent seek attempts having any visible effect
$(".fp-buffer, .fp-progress", root).on("mousedown touchstart", function (e) {
e.stopPropagation();
});
 
// do not show touch button on touch devices
$(root).removeClass("is-touch");
 
} else {
// the generic player does not allow a beforeseek listener
// therefore we have to work with a separate timer to grab the
// playback position before seek and set a fake seeking state
var timer,
ct = 0,
seekback = false;
 
api.on("ready", function (e, api) {
timer = setInterval(function () {
if (!seekback) {
ct = api.video.time;
}
}, 250);
 
}).on("seek", function (e, api) {
if (!seekback) {
var pos = ct;
 
seekback = true;
if (api.paused) {
api.resume();
}
api.seek(pos, function () {
seekback = false;
});
}
 
}).on("unload", function () {
clearInterval(timer);
 
});
}
});

JavaScript

<body/>

<div data-ratio="0.4167"
data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st"
class="flowplayer fixed-controls">
 
<video>
<source type="video/webm" src="//edge.flowplayer.org/functional.webm">
<source type="video/mp4" src="//edge.flowplayer.org/functional.mp4">
<source type="video/flash" src="mp4:functional">
</video>
 
</div>

HTML

Preventing seek in one direction only

If you only want to prevent seeking in one direction, do not override UI effects which are part of disabling seeking altogether. For instance, to disable forward seeking only, just set up the API like this:

flowplayer(function (api, root) {
api.on("beforeseek", function (e, api, target) {
// prevent seeking beyond current position
if (target >= api.video.time) {
e.preventDefault();
});
});
});

JavaScript

Compare with this demo for another onbeforeseek scenario.