Flowplayer · Instant fullscreen

Player goes instantly fullscreen on load.

<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

<style>

.flowplayer {
background-color: #ccc;
}

CSS

We cannot bind the fullscreen trigger to any player events as the fullscreen() method must be triggered by direct user interaction. Therefore we use a splash setup and the callback of the load event.

<script>

window.onload = function () {
 
flowplayer("#player", {
ratio: 9/16,
splash: true,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/drive.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/drive.mp4" }
]
}
 
}).on("load", function (e, api) {
api.fullscreen();
 
});
 
};

JavaScript

<body/>

<div id="player"></div>

HTML