Guides
Start typing to search…

플로팅 기능 가이드

플로팅 기능을 통해 상품 페이지에서 접근성을 높이는 방법에 대한 가이드입니다.

플로팅 기능은 상품 페이지나 메인 페이지에서 접근성을 높이기 위해 사용됩니다. 이 기능은 현재 두 가지 모드가 존재합니다.

플로팅 모드 사용 시 주의사항

플로팅 모드를 사용할 하는 웹 페이지를 webView 형식으로 사용하는 경우에는 iOS와 Android의 WebView 설정에서 인라인 재생 및 자동 재생을 허용해야 합니다. 그렇지 않으면 미디어 재생에 문제가 발생할 수 있습니다.

iOS WKWebView 설정

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

Android WebView 설정

webView.getSettings().setMediaPlaybackRequiresUserGesture(false)

기본 플로팅

페이지 로드 시 플로팅 플레이어 (작은 비디오) 형태로 플레이어가 나타납니다.

닫기 버튼 기본 기능: 클릭시 플로팅 플레이어가 사라지며 재접속시에는 다시 노출됩니다.

확대 버튼 기본 기능 : 클릭시 기본 플레이어 링크로 리다이렉트 됩니다.

<script>
   window.SauceLiveLib.setFloatingType({type: 'basic'});
</script>

스크롤 플로팅

플레이어가 화면에서 보이지 않을 때 스크롤 이벤트에 따라 플로팅 형태로 전환됩니다.

닫기 버튼 기본 기능: 클릭시 UI 가 사라지지만 실제 플레이어가 랜딩된 위치로 스크롤시 다시 생성됩니다.

확대 버튼 기본 기능 : 최상된 위치로 스크롤을 올려주는 동작으로 동작합니다.

<script>
   window.SauceLiveLib.setFloatingType({type: 'scroll'});
</script>

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

플레이어에서 위에서 정의된 닫기 버튼 기본 기능 , 확대 버튼 기본 기능을 취소하고 별도 커스텀 형식으로 실행시키기 위해서는 아래 형식의 함수를 선언시 내부 기능을 취소하고 선언한 함수가 실행됩니다. (** 함수를 내부에서 실행하지 말아주세요**)

sauceflexFloatingModeFullscreen : 확대 버튼 기본 기능이 취소되고 선언된 함수가 실행됩니다.

sauceflexFloatingModeExit : 닫기 버튼 기본 기능이 취소되고 선언된 함수가 실행됩니다.

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

플로팅 모드 사용 시 세부 기능에 대한 사용 예시 방법

플로팅 사이즈 조정, 위치 조정, 버튼 노출 여부 등을 설정할 수 있습니다. 자세한 내용은 아래 링크를 참고해주세요.

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>

플로팅 모드 사용 시 정지 재생에 대한 커스텀 방식

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

플로팅 모드 내 이벤트 태깅 및 인터랙션 제어

플로팅 모드에서 발생하는 주요 사용자 인터랙션을 Adobe Analytics나 기타 분석 도구로 태깅하거나, 커스텀 제어하려면 라이브러리가 생성하는 DOM 요소의 고정 attribute를 참조하세요. 소스라이브 라이브러리는 플로팅 화면 내 버튼/컨트롤에 data-action 속성을 부여하여 이벤트 식별을 용이하게 합니다.

주요 이벤트 및 data-action 값

플로팅 화면 내 요소는 아래와 같은 고정 data-action 값을 가집니다. 이 값을 통해 이벤트 리스너를 등록하거나 Analytics 트래킹을 설정할 수 있습니다.

이벤트data-action 값설명
플로팅 닫기floating-close플로팅 닫기 버튼
플로팅 풀스크린floating-fullscreen플로팅 상태에서 원래의 플레이어 링크 이동 버튼
플로팅 음소거floating-mute-on : floating-mute-off플로팅 플레이어의 음소거 상태에 따른 음소거 요소
플로팅 영상 정지/ 재생floating-pause : floating-play플로팅 플레이어의 영상 정지 혹은 재생 상태를 확인하기 위한 요소

Adobe Analytics 태깅 예시

플로팅 로드 후, 이벤트 리스너를 등록하여 data-action을 감지하고 Analytics 등 트래킹용 코드를 추가하여 세팅 가능합니다.

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

실제 사용 예시 코드

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

플로팅 기능은 상품 페이지나 메인 페이지에서 접근성을 높이기 위해 사용됩니다. 이 기능은 두 가지 모드로 제공됩니


Updated 10 days ago