띄울 방송 정하기

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

⏱ 예상 소요 시간: 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 레이아웃 — 컨트롤형과 뱃지형

→