Flowplayer · Preview a snippet of a longer video

Replay preview

Seeking to this position prevented in preview mode.

Only a snippet from 15 seconds to 40 seconds is shown.

Caveat

In serious production refrain from this kind of setup, unless you really cannot avoid it. Rather consider offering a short video on its own, which is also easier to maintain.

On devices which do not support inline video (e.g. iPhone), only the first seek to the start position and the pause on the end position work. The generic player does not react to any seeking events: You have to find a different solution for those devices.

If no HLS is available, video files will still be buffered entirely and are accessible by other means: You are wasting resources.

<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

<style>

.flowplayer {
background-image: url(//flowplayer.org/media/img/drive/home/drive-shoot.jpg);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer {
background-image: url(//flowplayer.org/media/img/drive/home/drive-shoot@2x.jpg);
}
}
 
/* do not show the quality selector on "finish" */
.flowplayer.cue1 .fp-quality-selector {
width: 0;
}
/* announce replay */
.flowplayer .fp-toggle {
display: none;
z-index: 12;
position: absolute;
top: 20%;
width: 100%;
text-align: center;
cursor: pointer;
}
.flowplayer .fp-toggle span {
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: xx-large;
color: #eee;
background-color: #f00;
}
.flowplayer.cue1 .fp-toggle {
display: block;
}
 
.flowplayer .seekwarn {
display: none;
position: absolute;
z-index: 2;
bottom: 50px;
left: 20%;
padding: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: larger;
background-color: #eee;
color: #f00;
}

CSS

<script>

$(function () {
 
var container = $("#preview"),
startpos = 15,
endpos = 40;
 
flowplayer(container, {
cuepoints: [startpos, endpos],
ratio: 9/16,
clip: {
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/drive.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/drive.mp4" }
],
hlsjs: {
// hlsjs has seek on start built in
startPosition: startpos
},
flashls: {
// we need exact seeking in flash hls
seekmode: "ACCURATE"
}
},
splash: true
 
}).on("cuepoint", function (e, api, cue) {
if (cue.time === endpos) {
api.pause();
api.one("resume.replay", function (e, api) {
api.seek(startpos, function (e, api) {
api.resume();
});
});
}
 
}).on("ready", function (e, api) {
if (api.engine.engineName !== "hlsjs") {
api.seek(startpos);
}
 
}).on("beforeseek", function (e, api, targetpos) {
if (targetpos < startpos || targetpos > endpos) {
e.preventDefault();
$(".seekwarn", container).show(0, function () {
var warn = $(this);
setTimeout(function () {
warn.fadeOut();
}, 2000);
});
}
});
 
});

JavaScript

Compare with this demo for another onbeforeseek scenario.

<body/>

The magic fp-toggle element behaves like a replay button.

<div id="preview">
<div class="fp-toggle">
<span>Replay preview</span>
</div>
<div class="seekwarn">
<p>Seeking to this position prevented in preview mode.</p>
</div>
</div>

HTML