띄울 방송 정하기

띄울 방송 정하기 — 소스라이브 플레이어

⏱ 예상 소요 시간: 5~10분

📋 사전 조건: 플로팅 모드 선택

🔧 필수 단계 — 두 함수 중 하나는 반드시 호출합니다

띄울 방송 정하기

플레이어를 초기화하는 함수는 두 가지이고, 둘 중 하나만 호출합니다.
띄울 라이브가 정해져 있으면 setInit(), "지금 진행 중인 라이브"를 자동으로 띄우려면 setOnAirInit()을 사용합니다.

비교 항목	🎯 라이브 ID 지정 `setInit`	🔄 진행 중인 라이브 자동 선택 `setOnAirInit`
필요한 값	`broadcastId` (라이브 ID)	`partnerId` (파트너 ID)
어떤 방송	지정한 그 라이브	진행 중인 라이브 중 가장 최근에 시작한 라이브
방송 결정 시점	호출하는 순간 확정	`load()` 시점에 자동 조회 후 확정
진행 중인 라이브가 없으면	해당 없음	아무것도 표시하지 않음 (오류 아님)
페이지마다 할 일	페이지별로 라이브 ID를 넣어야 함	코드 수정 없이 라이브가 열릴 때마다 자동 반영
추천 상황	기획전·상품 상세처럼 보여줄 라이브가 정해진 페이지	홈·목록처럼 지금 하는 라이브를 항상 노출하고 싶을 때 (홈 플로팅)

JavaScript — 라이브 ID 지정

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

JavaScript — 진행 중인 라이브 자동 선택 (홈 플로팅)

window.SauceLiveLib.setOnAirInit({ partnerId: '파트너ID를 입력해주세요' });
window.SauceLiveLib.setFloatingType({ type: 'basic' });
window.SauceLiveLib.load();

📌 파트너 ID는 계약 완료 후 모비두 담당자로부터 발급받는 값입니다. 라이브 ID처럼 라이브마다 달라지지 않고 고객사당 하나로 고정되므로, 한 번 심어두면 이후 라이브가 열릴 때마다 별도 작업 없이 자동으로 노출됩니다.

⚠️ 방송은 페이지가 로드될 때 한 번만 선택됩니다. 시청자가 페이지를 열어둔 상태에서 다른 라이브가 새로 시작해도 자동으로 갈아타지 않습니다. 새 라이브는 페이지를 다시 열 때 반영됩니다.

⚠️ 두 함수를 함께 호출하지 마세요. 나중에 호출한 쪽이 앞의 설정을 덮어씁니다. 또한 setInit에 broadcastId가, setOnAirInit에 partnerId가 없으면 초기화가 중단되고 브라우저 콘솔에 오류가 남습니다.

홈 플로팅 완성 예시

홈처럼 "지금 하는 라이브가 있으면 알려주는" 화면에 적합한 구성입니다. partnerId를 교체하면 실행됩니다.

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.setOnAirInit({ partnerId: '파트너ID를 입력해주세요' });
  window.SauceLiveLib.setFloatingType({
    type: 'basic',
    layout: { type: 'badge' }
  });
  window.SauceLiveLib.load();
});
</script>
</html>

다음 단계

🪟 작은 창 UI 레이아웃 — 컨트롤형과 배지형

→