Flowplayer · Site intro doc

<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

<style>

/* make room for countdown and show it below player */
.flowplayer {
margin-bottom: 80px;
overflow: visible;
background-color: #004d80;
}
/* discourage no-op clicks on player area */
.flowplayer * {
cursor: default !important;
}
/* hide all header elements */
.flowplayer .fp-header {
display: none;
}
/* hide play/pause button and timestamp */
.flowplayer .fp-play,
.flowplayer .fp-pause,
.flowplayer .fp-timestamp {
visibility: hidden !important;
}
/* do not hide minimal timeline controls */
.flowplayer.is-ready .fp-controls {
opacity: 1;
}
/* the countdown area */
.flowplayer.is-inverted.is-ready .fp-remaining {
position: absolute;
top: 110%; /* below player */
display: block;
font-size: 200%;
left: 20px;
width: 4em;
height: 4ex;
padding: 0.5ex 0 1ex 0;
background-color: #333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 15px #000;
-moz-box-shadow: 0 0 15px #000;
box-shadow: 0 0 15px #000;
}
 
/* custom context menu */
.flowplayer .fp-context-menu.fp-menu * {
text-align: center !important;
}
.flowplayer .fp-context-menu.fp-menu .heading {
color: #eee;
font-weight: bold;
}
.flowplayer .fp-context-menu.fp-menu a {
cursor: pointer !important;
}

CSS

<script>

window.onload = function () {
 
flowplayer("#player", {
autoplay: true,
keyboard: false,
ratio: 5/12,
logo: "https://flowplayer.org/media/img/mylogo.png",
key: "$775445646737769",
clip: {
hlsQualities: false,
hlsjs: {
startLevel: -1
},
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/nature.m3u8" },
{ type: "video/mp4", src: "//edge.flowplayer.org/nature.mp4" }
]
}
 
}).on("ready", function (e, api) {
// to avoid getting stuck on devices which do not allow autoplay
// we delay disabling the api
api.disable(true);
 
}).on("finish", function () {
// redirect to this page
location.href = "site-intro-doc.html";
 
});
 
};

JavaScript

<body/>

<div id="player" class="fp-minimal is-inverted">
<div class="fp-context-menu fp-menu">
<span class="heading">Custom context menu</span><br>
<a href="site-intro-doc.html">skip this intro &#8658;</a>
</div>
</div>

HTML

Go back to site intro demo.