Float on Scroll

This plugin provides "float on scroll" functionalities for Flowplayer Native

Manual Javascript setup
OVP managed player
Configuration
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 abilities will be automatically disabled to prevent UI problems resulting from 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).

- property
- default
- description
- float_on_scroll boolean
- true
- false disables the float on scroll feature for selected players

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.

Float on Scroll

Table of contents

Manual Javascript setup

OVP managed player

Configuration

Sample code

Demo

On this page

Float on Scroll

Table of contents

Manual Javascript setup

OVP managed player

Configuration

Sample code

Demo

()

On this page