Float-on-Scroll plugin

This plugin provides float-on-scroll functionality for Wowza Flowplayer. When a user scrolls past the main player on a page, the default behavior forces the player container to pop out to a fixed position. Media playback continues in the floating, popped-out container. If the user scrolls back to the main player, the floating container disappears, and playback resumes in the main player element.

Info

The Float-on-Scroll plugin does not work inside an <iframe> element.

Install the plugin

You can load the Float-on-Scroll plugin next to the core player and any other plugins you would like to use.

Copy

Copied

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/float-on-scroll.min.js"></script>

Configure the plugin

There are no mandatory configuration options for the Float-on-Scroll plugin. You can just load the plugin to activate it.

Info

When using multiplay, the Float-on-Scroll feature is automatically disabled to prevent UI inconsistencies caused by multiple players floating at the same time. Optionally, you can disable the plugin for selected players.

Properties

The following properties allow you to manage the default behavior for the Float-on-Scroll plugin.

Property	Default	Description
float_on_scroll boolean	true	When `false`, disables the Float-on-Scroll feature for selected players.
float_default boolean	true	When `false`, disables the default behavior for the Float-on-Scroll plugin. By default, the player container pops out to a fixed position on the page when a user scrolls past the main player container. The fixed container pops back in when the user scrolls past the main player position.

If you plan on using the Float-on-Scroll plugin with multiple players on a page, you must specify which player should float. Only one of the players in this scenario can have the float_on_scroll property set to true. When this preference isn't explicitly set, the first initialized player floats by default.

Sample configuration

Copy

Copied

const player1 = flowplayer("#player_1", { 
  src: "videos.example.com/your_content.m3u8",
  float_on_scroll: false
})

const player2 = flowplayer("#player_2", {
  src: "videos.example.com/your_content.m3u8",
  float_on_scroll: true
})

Methods

The methods described in this section allow you to trigger and control the floating behavior of the player.

Methods	Description
`popIn()`	Use to revert the player from its fixed, popped-out position and into the main player on the page.
`popOut()`	Use to pop out the player from the main player position to a fixed, popped-out state.

Events

This table describes the events you can capture in order to control the floating behavior of the player.

Event	Description
`float:exit`	Emitted when a user clicks to exit the floating player. By default when exiting the, when a user clicks to exit the floating player, the floating container pops back in and media playback is paused in the main player container.
`float:pop:out`	Emitted when the player pops out from the main player container to a fixed position on the page.
`float:pop:in`	Emitted when the player pops back in from a fixed position to the main player container on the page.

Demo the plugin

As an example, use the following code snippets when implementing and working with the Float-on-Scroll plugin. You can also check out this demo to see how the plugin works.

Copy

Copied

<!-- Set up the plugin and player container -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/float-on-scroll.min.js"></script>

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

Copy

Copied

// Initialize and configure the player
<script>
  var player = flowplayer('#player', { 
      src  : "//edge.flowplayer.org/bauhaus.m3u8",
      // Add your token
      token: "myToken"
  });
</script>