플로팅 모드

작은 창으로 전환하는 시점을 정하는 설정입니다. basic 은 처음부터 작은 창으로, scroll 은 원래 플레이어가 화면 밖으로 나갈 때 전환합니다.

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

⏱ 예상 소요 시간: 5분

📋 사전 조건: 플로팅 플레이어 개요 확인

🔧 필수 단계 — type 은 생략할 수 없습니다

플로팅 모드 선택

setFloatingType()의 type 값으로 모드를 선택합니다.
type 은 필수이고, 나머지 파라미터는 모두 선택입니다.

비교 항목	📌 기본 플로팅 `basic`	📜 스크롤 플로팅 `scroll`
등장 시점	페이지 로드 시 바로 플로팅 플레이어로 표시	임베드된 플레이어를 지나 스크롤할 때 플로팅으로 전환
전제 조건	일반 플레이어 영역이 없어도 됨	페이지에 일반 플레이어가 임베드되어 있어야 자연스러움
닫기 버튼	사라진 뒤 재접속 시 다시 노출	사라진 뒤 원래 위치로 스크롤하면 다시 생성
확대 버튼	기본 플레이어 링크로 이동	플레이어 위치(최상단)로 스크롤
위치 이동(드래그)	가능 — 드래그 후 가까운 모서리로 자동 정렬	불가 — 지정한 위치에 고정
추천 상황	플로팅을 단독으로 사용하거나, 라이브 링크를 공유해 바로 시청하게 할 때	상세페이지에 플레이어가 있고, 스크롤로 지나쳐도 시청을 유지하고 싶을 때

페이지 로드 시 바로 플로팅 플레이어 형태로 나타납니다.

이런 상황에 적합

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

이런 상황에 적합

JavaScript — 기본 플로팅

window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
window.SauceLiveLib.setFloatingType({ type: 'basic' });
window.SauceLiveLib.load();

JavaScript — 스크롤 플로팅

window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
window.SauceLiveLib.setFloatingType({ type: 'scroll' });
window.SauceLiveLib.load();

Updated about 10 hours ago

Did this page help you?