Flowplayer · Speed method with UI widgets

0.25x 0.5x 1x 1.5x 2x

GUI for playrate changes

Caveat: hlsjs loses sound at slow speeds; we kept 0.25 nevertheless for demo purposes. If sound in slow-motion is a high priority for you, consider omitting hlsjs in favour of MP4.

<head/>

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

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

<style>

.flowplayer {
background-color: #333;
background-image: url(//d12zt1n3pd4xhr.cloudfront.net/img/ccc.jpg);
}
.flowplayer .fp-color {
background-color: #a1e1ff;
}
.flowplayer .fp-color-play {
fill: #a1e1ff;
}
 
/* initially hide speed buttons while they cannot be used */
.is-splash.flowplayer .buttons, .is-loading.flowplayer .buttons {
display: none;
}
.flowplayer .buttons {
position: absolute;
right: 1em;
bottom: 4em;
z-index: 1; /* make clickable */
display: block;
filter: alpha(opacity=100);
opacity: 1;
}
.is-mouseout.flowplayer .buttons {
filter: alpha(opacity=0);
opacity: 0;
/* same transition as other ui elements like fullscreen */
-webkit-transition: opacity .15s .3s;
-moz-transition: opacity .15s .3s;
transition: opacity .15s .3s;
}
.flowplayer .buttons span {
padding: 0.5ex;
margin: 0.5ex;
width: 3.5em;
display: inline-block;
text-align: center;
font-weight: bold;
background-color: #eee;
cursor: pointer;
-webkit-border-radius: 1ex;
-moz-border-radius: 1ex;
border-radius: 1ex;
}
.flowplayer .buttons span.active {
color: #00abcd;
background-color: #666;
cursor: default;
}

CSS

<script>

The 5 speed buttons correspond to the 5 playback rates configured in the speeds configuration option.

Therefore speed changes triggered by keystrokes will be reflected in the speed buttons too.

// global speed widgets setup applying to all players on page
flowplayer(function (api, root) {
var speedelement = root.querySelector(".buttons"),
buttonElements = speedelement.getElementsByTagName("span"),
buttons = [],
i;
 
for (i = 0; i < buttonElements.length; i += 1) {
buttons.push(buttonElements[i]);
};
 
api.on("load", function (e, api) {
// remove speed buttons if playback rate changes are not available
if (api.engine.engineName == "flash" || !flowplayer.support.inlineVideo) {
speedelement.parentNode.removeChild(speedelement);
}
 
}).on("speed", function (e, api, rate) {
// mark the current speed button as active
var i;
 
speedelement.querySelector(".active").removeAttribute("class");
for (i = 0; i < api.conf.speeds.length; i += 1) {
if (api.conf.speeds[i] == rate) {
buttons[i].className = "active";
break;
}
}
});
 
// bind speed() call to click on buttons
buttons.forEach(function (button) {
 
button.onclick = function () {
var i;
 
if (button.classNme != "active") {
for (i = 0; i < api.conf.speeds.length; i += 1) {
if (buttons[i] === button) {
api.speed(api.conf.speeds[i]);
break;
}
}
}
};
 
});
 
});
 

// install a sample player once the DOM is ready
window.onload = function () {
 
flowplayer("#player", {
// speeds: [0.25, 0.5, 1, 1.5, 2], // default
ratio: 3/4,
splash: true,
facebook: "https://blacktrash.org/underdogma/ccc.php",
embed: {
iframe: "//d12zt1n3pd4xhr.cloudfront.net/iframe/ccc.html"
},
hlsQualities: false,
clip: {
sources: [{
type: "application/x-mpegurl",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.m3u8",
engine: "hlsjs" // no speed changes in Flash available
}, {
type: "application/x-mpegurl",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.m3u8",
engine: "html5" // no speed changes in Flash available
}, {
type: "video/mp4",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.mp4",
engine: "html5" // fail over to next in flash mode
}, {
type: "application/x-mpegurl",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.m3u8"
}]
}
});
 
};

JavaScript

<body/>

A player container with the speed buttons:

<div id="player" class="fp-slim fp-outlined no-buffer">
<div class="buttons">
<span>0.25x</span>
<span>0.5x</span>
<span class="active">1x</span>
<span>1.5x</span>
<span>2x</span>
</div>
</div>

HTML