Flowplayer · Multiple splash

<head/>

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

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.5/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;
}
 
#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,
embed: {
skin: "//releases.flowplayer.org/6.0.5/skin/minimalist.css"
}
};
 

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

JavaScript

<body/>

<div id="ccc">
<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">
<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">
<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