Flowplayer · Long video

Video courtesy of Underdogma Movies

<head/>

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

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

Additionally the thumbnails plugin is loaded to display visual previews on the timeline:

<!-- Flowplayer thumbnails plugin -->
<script src="//releases.flowplayer.org/thumbnails/flowplayer.thumbnails.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;
}

CSS

<script>

// ensure that DOM is ready
window.onload = function () {
 
flowplayer("#long", {
ratio: 3/4,
splash: true,
facebook: "https://blacktrash.org/underdogma/ccc.php",
embed: {
iframe: "//d12zt1n3pd4xhr.cloudfront.net/iframe/ccc.html"
},
hlsQualities: false,
clip: {
title: "Cowboy Canoe Coma",
sources: [
{ type: "application/x-mpegurl",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.m3u8" },
{ type: "video/mp4",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.mp4" }
],
thumbnails: {
template: "//d12zt1n3pd4xhr.cloudfront.net/ccc/thumbs/{time}.jpg",
height: 70,
interval: 10
}
}
});
 
};

JavaScript

<body/>

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

HTML