Flowplayer · Mid roll clip

 

<head/>

<style>

.flowplayer {
background-color: #333;
margin-bottom: 20px;
}

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"),
 
// helper to show/hide UI Elements of this player
// getElementsByClassName is not supported in IE8
toggleUiElement = function (klass, show) {
var divs = container.getElementsByTagName("div"),
klasspat = new RegExp("(^| )" + klass + "( |$)"),
i;
 
for (i = 0; i < divs.length; i += 1) {
if (klasspat.test(divs[i].className)) {
divs[i].style.display = show ? "block" : "none";
return;
}
}
};
 

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]) {
toggleUiElement("fp-controls");
toggleUiElement("fp-time");
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);
 
toggleUiElement("fp-controls", true);
toggleUiElement("fp-time", true);
info.innerHTML = "feature resumed at " + (feature.cuepoints[0] + 0.2) + " seconds";
});
 
}
});
 
};

JavaScript

<body/>

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

HTML