플로팅 플레이어

사용자가 다른 페이지로 이동해도 플레이어를 작은 창으로 계속 시청하게 하는 기능입니다. 플로팅 모드·띄울 방송·작은 창 UI 세 가지를 조합해 구성합니다.

플로팅 플레이어 — 소스라이브 플레이어

⏱ 예상 소요 시간: 5분

📋 사전 조건: 라이브러리 설치 및 플레이어 실행 확인

자주 쓰는 조합

자주 쓰이는 네 가지 구성입니다. 각 항목을 고르는 기준은 아래 「구성 단계」에서 이어집니다.

하고 싶은 것	설정
상세페이지에서 스크롤로 지나쳐도 계속 보이게	`type: 'scroll'` + 컨트롤형
라이브 링크를 공유해 바로 시청하게	`setInit` + `type: 'basic'` + 컨트롤형
홈에서 "지금 하는 라이브"를 알리기	`setOnAirInit` + `type: 'basic'` + 배지형
특정 영역 안에서만 움직이게	`type: 'basic'` + `restrictionArea`

구성 단계

플로팅 플레이어는 아래 순서로 구성합니다.
1~2단계가 필수이고, 3~5단계는 필요할 때만 추가합니다.

단계	정하는 것	필수	API
1. 플로팅 모드	언제 작은 창으로 전환할지	필수	`setFloatingType({ type })`
2. 띄울 방송	어떤 라이브를 띄울지	필수	`setInit` · `setOnAirInit` 중 하나
3. 작은 창 UI	작은 창 위에 무엇을 그릴지	선택	`layout.type` — 기본값 `'control'`
4. 위치·크기	어디에 얼마나 크게 띄울지	선택	`size` · `position` · `restrictionArea`
5. 버튼 동작	버튼을 눌렀을 때의 동작과 추적	선택	전역 함수 · `data-action`

완성 예시 코드

가장 기본이 되는 구성입니다. broadcastId를 교체하면 실행됩니다.

HTML — 완성 예시

<html>
<head>
  <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 1 day ago

Did this page help you?