플로팅 기능

상품 페이지 혹은 메인 페이지에서 플로팅으로 노출 시켜 접근성을 올려주는 기능입니다.

basic 플로팅

처음 로드 할때 부터 Floating 형태로 플레이어가 로드 됩니다.

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

scroll 플로팅

플레이어가 scroll 이벤트로 화면에서 보이지 않을때 Floating 형태로 플레이어가 전환 됩니다.

예시코드

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

샘플 코드 페이지

<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;
      }
     // 필요한 css 는 추가적으로 세팅해도 무관합니다.
    </style>
  </head>
  <body>
   <div id='sauce_live'></div>

  </body>
  <script>
    window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
    // 방송이 stage 방송일 경우 아래의 코드로 테스트때 사용해주세요  
    // window.SauceLiveLib.setInit({ broadcastId: 'stage 방송ID 를 입력해주세요',env:'stage' });
     window.SauceLiveLib.setFloatingType({type: 'basic'});
    window.SauceLiveLib.load()
  </script>
</html>

플로팅 모드 사용시 개별 클릭에 대한 브릿지 세팅 방법

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
/** 아래 함수 선언시 풀스크린 버튼 클릭시 동작하는 기본 링크 이동 기능이 삭제되고 선언된 로직이 실행됩니다.  
 *  함수 세팅하여 X 버튼 클릭시 지정한 링크로의 이동 등을 제어할수 있습니다.   
 */ 
function sauceflexFloatingModeFullscreen() {
    console.log('sauceflexFloatingModeFullscreen')
}
/** 아래 함수 선언시 닫기 버튼 클릭시 동작하는 사라지는 기능이 삭제되고 선언된 로직이 실행됩니다.  */ 
function sauceflexFloatingModeExit() {
    console.log('sauceflexFloatingModeExit')
}
   window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
   window.SauceLiveLib.setFloatingType({type: 'basic' });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>