Flowplayer · Mid roll clip

 

<head/>

<style>

.flowplayer {
background-color: #333;
}
 
/* hide UI while disabled */
.flowplayer.is-disabled .fp-header,
.flowplayer.is-disabled .fp-controls,
.flowplayer.id-disabled .fp-time {
visibility: hidden;
}

CSS

<script>

window.onload = function () {
var feature = {
cuepoints: [10],
title: "feature",
sources: [
{ type: "video/mp4", src: "//edge.flowplayer.org/bauhaus.mp4" },
{ type: "video/flash", src: "mp4:bauhaus.mp4" }
]
},
midroll = {
cuepoints: [5],
title: "mid-roll",
sources: [
{ type: "video/mp4", src: "//edge.flowplayer.org/functional.mp4" },
{ type: "video/flash", src: "mp4:functional.mp4" }
]
},
container = document.getElementById("player"),
info = document.getElementById("info");
 

flowplayer(container, {
ratio: 5/12,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
clip: feature
 
}).on("cuepoint", function (e, api, cuepoint) {
if (cuepoint.time === feature.cuepoints[0]) {
info.innerHTML = "playing 5 second midroll at " + cuepoint.time + " seconds";
api.load(midroll, function (e, api) {
api.disable(true);
});
 
} else if (cuepoint.time === midroll.cuepoints[0]) {
api.disable(false).load(feature, function (e, api) {
api.seek(feature.cuepoints[0] + 0.2);
info.innerHTML = "feature resumed at " + (feature.cuepoints[0] + 0.2) + " seconds";
});
 
}
});
 
};

JavaScript

<body/>

<div id="player" class="fp-slim fixed-controls"></div>

HTML