Floating Player Feature

This feature improves accessibility by displaying the player in a floating mode on the product page or main page.

Basic Floating

The player is loaded in floating mode from the initial page load.

<script>
   window.SauceLiveLib.setFloatingType({type: 'basic' | 'scroll',size?:{ width:'200px' } ,restrictionArea?:{}});
</script>

Scroll Floating

The player automatically switches to floating mode when it is no longer visible in the viewport due to a scroll event.

Example Code

<script>
   window.SauceLiveLib.setFloatingType({type: 'basic' | 'scroll',size?:{ width:'200px' } ,restrictionArea?:{}});
</script>

Sample Code Page

<html>
  <head>
    <title>sauce live example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
    <script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
     // It is perfectly fine to apply additional CSS styles if necessary.
    </style>
  </head>
  <body>
   <div id='sauce_live'></div>

  </body>
  <script>
    window.SauceLiveLib.setInit({ broadcastId: 'Please enter the broadcast ID.' });
    // If the broadcast is a stage broadcast, please use the following code for testing. 
    // window.SauceLiveLib.setInit({ broadcastId: 'stage Please enter the broadcast ID.',env:'stage' });
     window.SauceLiveLib.setFloatingType({type: 'basic'});
    window.SauceLiveLib.load()
  </script>
</html>

Handling Individual Click Events in Floating Mode via Bridge Settings

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
/** When the following function is declared, the default behavior of navigating to a link upon clicking the fullscreen button is disabled, and the custom logic defined in the function will be executed instead. 
 *  By defining this function, you can override the default behavior—for example, redirecting to a specific link when the close (X) button is clicked.  
 */ 
function sauceflexFloatingModeFullscreen() {
    console.log('sauceflexFloatingModeFullscreen')
}
/** when the following function is declared, the default behavior of hiding the player upon clicking the close button is disabled, and the declared logic will run instead. */ 
function sauceflexFloatingModeExit() {
    console.log('sauceflexFloatingModeExit')
}
   window.SauceLiveLib.setInit({ broadcastId: 'Please enter the broadcast ID.' });
   window.SauceLiveLib.setFloatingType({type: 'basic' });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>