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.

<style>

.flowplayer {
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);
}
}
 
/* do not display big play/pause button */
.flowplayer.is-ready .fp-pause,
.flowplayer.is-ready .fp-play {
display: none;
}

CSS

<script>

flowplayer(function (api, root) {
 
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/docs/", "_blank");
}
});
 
});
 
});

JavaScript

<body/>

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

HTML