Floating Player Feature

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

Notes for Using Floating Mode

If the web page using Floating Mode is displayed in a WebView, you must enable inline playback and autoplay in the WebView settings on both iOS and Android. Otherwise, media playback may not work properly.

iOS WKWebView

let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: rect, configuration: configuration)

Android WebView

webView.getSettings().setMediaPlaybackRequiresUserGesture(false)

Basic Floating

When the page loads, the player appears as a floating player (small video).

Default behavior of the close button: When clicked, the floating player is dismissed and will appear again when the user revisits the page.

Default behavior of the fullscreen button: When clicked, the user is redirected to the default player link.

window.SauceLiveLib.setFloatingType({type: 'basic'});

Scroll Floating

When the player is no longer visible on the screen, it switches to a floating mode based on the scroll event.

Default behavior of the close button: When clicked, the UI disappears. However, the floating player will be recreated when the user scrolls back to the original position where the player is embedded.

Default behavior of the fullscreen button: When clicked, the page scrolls back to the top position where the original player is located.

window.SauceLiveLib.setFloatingType({type: 'scroll'});

Bridge Setup for Handling Individual Click Actions in Floating Mode

To override the default behavior of the close button and fullscreen button defined above and execute custom logic instead, declare the following functions. When these functions are declared, the default internal behavior is disabled and the declared function will be executed instead. (Do not call these functions internally.)

sauceflexFloatingModeFullscreen The default behavior of the fullscreen button is disabled, and the declared function will be executed.

sauceflexFloatingModeExit The default behavior of the close button is disabled, and the declared function will be executed.

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
function sauceflexFloatingModeFullscreen() {
    console.log('sauceflexFloatingModeFullscreen');
}
function sauceflexFloatingModeExit() {
    console.log('sauceflexFloatingModeExit');
}
window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
window.SauceLiveLib.setFloatingType({type: 'basic' });
window.SauceLiveLib.load();
</script>

Examples of Using Detailed Floating Mode Features

You can configure options such as the floating player size, position, and button visibility. For more details, please refer to the link below.

https://docs.sauce.im/docs/saucelive-library-payload#setfloatingtype

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
  window.SauceLiveLib.setFloatingType({ 
    type: 'basic',
    size: { width: '135px', height: '230px' },
    restrictionArea: { element: document.body },
    position: { position: 'top left' },
    buttonList: ['exit']
  });
  window.SauceLiveLib.load();
</script>

Custom Playback Control in Floating Mode

Event Tagging and Interaction Control in Floating Mode

To tag key user interactions that occur in Floating Mode with Adobe Analytics or other analytics tools, or to implement custom interaction control, refer to the fixed attributes of the DOM elements generated by the library.

The Saucelive library assigns a data-action attribute to buttons and controls within the floating player UI, making it easier to identify and track events.

Key Events and data-action Values

Elements within the floating player contain predefined data-action values as shown below. These values can be used to register event listeners or configure analytics tracking.

Adobe Analytics Tagging Example

After the floating player is loaded, you can register an event listener to detect the data-action attribute and add tracking code (e.g., for Analytics) to configure event tracking.

const sauce_live = document.getElementById('sauce_live');
sauce_live?.addEventListener('click', function(event) {
    const action = event.target.getAttribute('data-action');
    if (action === 'floating-mute-on') {
     // tracking code add
     } 
     if (action === 'floating-close') {
      // tracking code add
     }
     if (action === 'floating-fullscreen') {
      // tracking code add
     }    
     if (action === 'floating-pause') {
      // tracking code add
      }
});

Example code

<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;
      }
    </style>
  </head>
  <body>
   <div id='sauce_live'></div>
  </body>
  <script>
  window.addEventListener("DOMContentLoaded", () => {
    window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
    window.SauceLiveLib.setFloatingType({type: 'basic'});
    window.SauceLiveLib.load();
 });

  </script>
</html>

The Floating feature is used to improve accessibility on product pages or main pages. This feature is provided in two modes.