라이브러리 설치

스크립트 한 줄과 setInit·load 호출로 자사몰 페이지에 소스클립 플레이어를 띄웁니다. 마운트 요소와 표시되는 클립 목록을 함께 다룹니다.

라이브러리 설치 — 소스클립 플레이어

⏱ 예상 소요 시간: 10분

📋 사전 조건: 파트너 ID · 클립 ID

전체 코드

아래 코드만으로 플레이어가 실행됩니다. 파트너 ID와 클립 ID 두 값만 교체합니다.

html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
  </head>
  <body>
    <div id="sauce_clip_player"></div>

    <script src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
    <script>
      window.SauceClipPlayerLib.setInit({
        partnerUniqueId: '파트너 ID',
        clipId: '클립 ID'
      })
      window.SauceClipPlayerLib.load()
    </script>
  </body>
</html>

💡 스테이지 환경. 운영 도메인 앞에 stage. 를 붙입니다 — https://stage.player.sauceclip.com/static/js/SauceClipPlayerLib.js

파라미터

setInit 은 세 값을 받습니다.

파라미터	타입	필수	기본값	설명
partnerUniqueId	String	필수	—	파트너 ID
clipId	String	필수	—	처음 재생할 클립 ID
elementId	String	선택	`'sauce_clip_player'`	플레이어를 붙일 요소 ID

⚠️ 두 필수 값 중 하나라도 비어 있으면 초기화가 중단되고 콘솔에 경고가 남습니다. 경고 문구는 콘솔 경고 메시지에 있습니다.

마운트 요소

elementId 로 지정한 요소에 플레이어가 그려집니다. 라이브러리가 이 요소의 스타일을 직접 지정합니다.

속성	지정되는 값
`class`	`sauceclip-player-module`
`height`	`var(--vh)` — 모바일 브라우저 주소 표시줄을 뺀 실제 높이
`position`	`relative` (플로팅 모드에서는 `fixed`)
`z-index`	`300` (플로팅 모드에서는 `9999`)

📍 요소를 찾지 못하면 플레이어가 그려지지 않고 콘솔에 경고가 남습니다. load 호출 시점에 요소가 문서에 있어야 합니다.

표시되는 클립 목록

clipId 의 클립부터 재생하고, 위아래 스와이프로 같은 파트너의 다른 클립이 이어집니다.

조건	이어지는 클립
기본	해당 파트너의 클립 목록
페이지 주소에 `curationId` 쿼리가 있을 때	그 큐레이션에 속한 클립 목록

📌 curationId 는 setInit 인자가 아니라 라이브러리를 넣은 페이지의 주소 쿼리에서 읽습니다. 예를 들어 https://자사몰/clip?curationId=큐레이션 ID 로 접근한 페이지에 라이브러리를 넣습니다.

다음 단계

사용자 인증 — 로그인한 시청자를 회원으로 잇기

→

Updated about 4 hours ago

Did this page help you?