Flowplayer · Fullscreen button in controlbar

<head/>

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

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.2.1/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

<script>

To make the fullscreen button the rightmost control it has to be moved into the controlbar after the HD menu is appended on ready.

flowplayer(function (api, root) {
var fsbutton = root.querySelector(".fp-fullscreen");
 
// append fullscreen button after HD menu is added on ready
api.on("ready", function () {
root.querySelector(".fp-controls").appendChild(fsbutton);
});
});
 

// ensure that DOM is ready
window.onload = function () {
 
flowplayer("#player", {
ratio: 5/12,
hlsQualities: [-1, 1, 3, 6, 7],
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/bauhaus.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/bauhaus.mp4" }
]
}
});
 
};

JavaScript

<body/>

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

HTML