Flowplayer · Speed menu plugin

Playback speed menu

The speed menu offers a graphical interface to select playback rates, which are by default only available via keyboard shortcuts.

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/>

The speed menu plugin is loaded after the flowplayer script and the hlsjs plugin:

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
 
<!-- The hlsjs plugin for playback of HLS without Flash in modern browsers -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
 
<!-- the speed menu plugin -->
<script src="//releases.flowplayer.org/speed-menu/flowplayer.speed-menu.min.js"></script>

HTML

<style>

.flowplayer {
background-color: #333;
background-image: url(//d12zt1n3pd4xhr.cloudfront.net/img/ccc.jpg);
}
.flowplayer .fp-color-play {
fill: #00abcd;
}

CSS

<script>

For this demo changing playback rate is assumed of high priority. Flash HLS does not offer speed changes. Therefore the Flash HLS sources is pushed down in the source picking order with the the engine source option.

// 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:

<div id="player" class="fp-slim fp-outlined no-buffer"></div>

HTML