Flowplayer · Multiple splash

<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 -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.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 {
margin: 10px 0;
background-color: #333;
}
.flowplayer .fp-color {
background-color: #a1e1ff;
}
.flowplayer .fp-color-play {
fill: #a1e1ff;
}
 
#ccc {
background-image: url(//d12zt1n3pd4xhr.cloudfront.net/img/ccc.jpg);
}
#manstalt {
background-image: url(//d12zt1n3pd4xhr.cloudfront.net/img/manstalt.jpg);
}
#stsp {
background-image: url(//d12zt1n3pd4xhr.cloudfront.net/img/stsp.jpg);
}

CSS

<script>

Looping through container elements selected by id attribute to perform a manual jQuery installation:

// global configuration
flowplayer.conf = {
splash: true,
ratio: 3/4
};
 

$(function () {
 
$.each(["ccc", "manstalt", "stsp"], function (i, id) {
 
$("#" + id).flowplayer({
thumbnails: {
template: "//d12zt1n3pd4xhr.cloudfront.net/" + id + "/thumbs/{time}.jpg",
height: 50,
interval: 10
},
embed: {
iframe: "//d12zt1n3pd4xhr.cloudfront.net/iframe/" + id + ".html"
}
});
 
});
 
});

JavaScript

<body/>

<div id="ccc" class="fp-slim fp-outlined no-buffer"
data-facebook="https://blacktrash.org/underdogma/ccc.php">
<video data-title="Cowboy Canoe Coma">
<source type="application/x-mpegurl" src="//d12zt1n3pd4xhr.cloudfront.net/ccc.m3u8">
<source type="video/mp4" src="//d12zt1n3pd4xhr.cloudfront.net/ccc.mp4">
</video>
</div>
 
<div id="manstalt" class="fp-slim fp-outlined no-buffer"
data-facebook="https://blacktrash.org/underdogma/moraliskanstalt.php">
<video data-title="Moralisk Anstalt">
<source type="application/x-mpegurl" src="//d12zt1n3pd4xhr.cloudfront.net/manstalt.m3u8">
<source type="video/mp4" src="//d12zt1n3pd4xhr.cloudfront.net/manstalt.mp4">
</video>
</div>
 
<div id="stsp" class="fp-slim fp-outlined no-buffer"
data-facebook="https://blacktrash.org/underdogma/stsp.php">
<video data-title="Same Time Same Place">
<source type="application/x-mpegurl" src="//d12zt1n3pd4xhr.cloudfront.net/stsp.m3u8">
<source type="video/mp4" src="//d12zt1n3pd4xhr.cloudfront.net/stsp.mp4">
</video>
</div>

HTML