Flowplayer · Link URL

Click on screen redirects to the Flowplayer documentation page,
while UI elements like controlbar, fullscreen etc. remain operational.

<head/>

The splash setup allows for the first click on the player area to start playback instead of redirecting. That is also why we wait for the "ready" event to implement the redirect.

Where the big play button is shown screen center on pause, the player UI is overlayed with the magic fp-toggle element. That way playback can be resumed by what 'feels like' clicking on the big play button but is in fact an invisible area of the same size..

<style>

.flowplayer {
margin-bottom: 40px; /* make room for static controlbar */
background-color: #033;
background-image: url(//flowplayer.org/media/img/demos/playful.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer {
background-image: url(//flowplayer.org/media/img/demos/playful@x2.jpg);
}
}
 
/* invisible fp-toggle element on top of UI */
.flowplayer .fp-toggle {
z-index: 12;
display: none;
position: relative;
margin: auto;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.flowplayer.is-paused .fp-toggle {
display: block;
}

CSS

<script>

Size and vertical position of the toggle element must be determined dynamically.

flowplayer.conf = {
embed: {
skin: "//releases.flowplayer.org/6.0.5/skin/playful.css"
}
};
 

flowplayer(function (api, root) {
 
var resizeToggle = function () {
// resize and position toggle play button area dynamically
var fs = api.isFullscreen,
ui = fs ? $(window) : $(".fp-ui", root),
uiWidth = ui.width(),
uiHeight = ui.height(),
// play button backround-size auto in fullscreen and 11% otherwise
size = fs && window.devicePixelRatio > 1 ? 240 : fs ? 120 : uiWidth * 0.11;
 
$(".fp-toggle").css({
width: size + "px",
height: size + "px",
marginTop: (uiHeight / 2 - size / 2) + "px"
});
};
 
api.on("ready", function () {
// click on player UI (screen) redirects to a different page
// after player is loaded
$(root).click(function (e) {
if ($(e.target).hasClass("fp-ui")) {
api.pause();
window.open("https://flowplayer.org/v6docs/", "_blank");
}
});
 
}).on("pause fullscreen fullscreen-exit", resizeToggle);
 
// make the play button area responsive
$(window).on("resize", resizeToggle);
});

JavaScript

<body/>

Always show controls using the fixed-controls modifier class so users can pause playback.

<div class="flowplayer fixed-controls is-splash" data-ratio="0.4167">
<!-- magic toggle element -->
<div class="fp-toggle"></div>
 
<video>
<source type="application/x-mpegurl" src="//edge.flowplayer.org/playful.m3u8">
<source type="application/x-mpegurl" src="//edge.flowplayer.org/playful.m3u8">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
</video>
 
</div>

HTML