Float on Scroll

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.

This plugin will not work inside an iframe.

Manual Javascript setup
OVP managed player
Configuration
API
Sample code
Demo

Manual Javascript setup

Load the plugin next to the core player and any other plugins (share, subtitles, quality selection) you require.

<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>

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed player

You can enable float-on-scroll in the Plugins section of the OVP player configurator . It will appear in both async Javascript and iframe embeds.

Configuration

There are no manadatory configuration options, just loading the plugin will activate it.

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 (useful for OVP managed player configurations if you want to override the configred plugin with inline JSON).

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.

- 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.

API

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.

Sample code

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
  })

Demo

Please see the bottom of the page for a demo (contains dummy text to allow the container to scroll).

Relevant source code:

<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>

<script>
  var player = flowplayer('#player', 
  { src  : "//edge.flowplayer.org/bauhaus.m3u8"
  // your token goes here
  // , token: "some string"  
  });
  </script>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can also check out this demo to see how the plugin works.

Float on Scroll

Table of contents

Manual Javascript setup

OVP managed player

Configuration

API

Methods

Events

Sample code

Demo

On this page

Float on Scroll

Table of contents

Manual Javascript setup

OVP managed player

Configuration

API

Methods

Events

Sample code

Demo

()

On this page