Guides

플로팅 기능

Suggest Edits

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

basic 플로팅

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

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

scroll 플로팅

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



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

상품 페이지 등에서 방송 ID 등을 파라미터로 세팅하여 플로팅을 사용하는 웹 페이지를 WebView 형태로 구현할 경우, 일부 앱의 권한 문제로 미디어 재생 동작에 이상이 발생할 수 있습니다. 특히 iOS와 Android의 WebView 설정에서 인라인 재생 및 자동 재생을 허용하도록 조정해야 플로팅 플레이어가 정상 작동합니다.

아래는 플랫폼별 설정 예시입니다.

iOS WKWebView 설정

//WKWebView에서 비디오 태그의 인라인 재생을 허용하려면 WKWebViewConfiguration의 allowsInlineMediaPlayback // 속성을 true로 설정하세요. 이렇게 하면 플로팅 모드에서 영상이 자동으로 재생됩니다.  
swiftlet configuration = WKWebViewConfiguration()  
configuration.allowsInlineMediaPlayback = true  
let webView = WKWebView(frame: rect, configuration: configuration)

allowsInlineMediaPlayback 속성에 대한 자세한 내용은 Apple 개발자 문서를 참조하십시오.

Android WebView 설정

// Android WebView에서 자동 재생하려면 mediaPlaybackRequiresUserGesture 속성을 false로 설정하세요. 
// 이 속성은 사용자 제스처 없이도 영상이 시작되도록 합니다.  
kotlinwebView.getSettings().setMediaPlaybackRequiresUserGesture(false)

mediaPlaybackRequiresUserGesture 속성에 대한 자세한 내용은 Android 개발자 문서를 참조하십시오.


예시코드

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

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

플로팅 사이즈 조정, 위치 조정, 버튼 노출 여부 등을 설정할수 있습니다.

<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',
    // width 하나 추가시 자동으로 9:16 
    size: { width:'135px', height:'230px' },
     // body 가 실제 전체 사이즈로 매핑되어있을 경우에만 동작
    restrictionArea:{ element:document.body  },
     // 상단 좌측에 플로팅이 랜딩
    position: { positon:'top left'}, 
    // exit, fullscreen, mute 중 원하는 버튼을 선택하여 사용해주세요
    buttonList:['exit']  })
    });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

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

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  // sauceflexFloatingTogglePlay 함수를 세팅시에는 기존 플로팅 영상 클릭시 동작하던 정지 재생에 대한 동작이 취소되고 세팅된 함수가 실행됩니다.
  function sauceflexFloatingTogglePlay(){
        console.log('SauceflexFloatingTogglePlay')
    }

 // 아래는 기존 플로팅 코드와 동일하게 사용
  window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
  window.SauceLiveLib.setFloatingType({ 
    type: 'basic',
      ....
    });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

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

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

주요 이벤트 및 data-action 값

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

이벤트data-action 값설명
플로팅 닫기floating-close플로팅 닫기 버튼
플로팅 풀스크린floating-fullscreen플로팅 상태에서 원래의 플레이어 링크 이동 버튼
플로팅 음소거floating-mute-on : floating-mute-off플로팅 플레이어의 음소거 상태에 따른 음소거 요소

Adobe Analytics 태깅 예시

플로팅 로드 후, 이벤트 리스너를 등록하여 data-action을 감지하고 Analytics를 호출하세요. 아래는 JavaScript 예시입니다.

// 플로팅 요소 로드 후 이벤트 리스너 등록
// 플로팅 요소에 이벤트 리스너 추가
 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
  }
});

Updated 17 days ago