플로팅 기능
상품 페이지 혹은 메인 페이지에서 플로팅으로 노출 시켜 접근성을 올려주는 기능입니다.
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>
Updated about 2 hours ago