Float on Scroll

This plugin provides "float on scroll" functionalities for a player

Javascript embed installation

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/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/float-on-scroll.min.js"></script>

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

Async cloud player installation

To enable the plugin in the async cloud player, declare it in the "plugins": [] config object with float-on-scroll .

Configuration

There are no 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.

Javascript embed configuration

Flowplayer Native configuration properties:

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

Here is an example of JS configuration:

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

Styling

To move or resize the floating container, use the body > #flowplayer-floating-container selector. Sample:

body > #flowplayer-floating-container {
  left: 90%;  
  max-width: 25%;
}

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/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/edge/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/edge/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/edge/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

Javascript embed installation

Async cloud player installation

Configuration

Javascript embed configuration

Styling

Demo

Popular searches