WEB 개발 가이드

소스클립 플레이어를 자사몰 웹 페이지에 넣는 연동 가이드입니다. 라이브러리와 URL 연동 중 하나를 고르고, 필요하면 브릿지 이벤트로 클릭 동작을 직접 처리합니다.

WEB 개발 가이드 — 소스클립 플레이어

플레이어 첫 실행

스크립트를 삽입하고 파트너 ID와 클립 ID로 초기화한 뒤 load 를 호출합니다.

html

<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>

💡 마운트할 <div> 가 스크립트보다 위에 있어야 합니다. 스크립트를 <head> 에 두는 구성이면 DOMContentLoaded 안에서 호출합니다.

연동 방식

두 방식은 플레이어를 어디에 두는지가 다릅니다. 브릿지 이벤트는 두 방식 모두에서 쓸 수 있습니다.

방식	플레이어 위치	쓰는 경우
라이브러리	자사몰 페이지 안의 `<div>`	페이지 레이아웃 안에 플레이어를 넣거나 플로팅으로 띄울 때
URL 연동	소스클립 도메인의 전용 페이지	배너·목록에서 플레이어 페이지로 넘길 때 앱 웹뷰로 열 때

📍 앱에서 여는 경우 URL 연동 방식으로 웹뷰에 띄우고 브릿지 이벤트를 구현합니다. 이동과 관련된 동작은 웹뷰 안에서 브릿지 이벤트 없이 처리되지 않습니다.

시작 전 준비

준비물	어디서	쓰이는 곳
파트너 ID	모비두 담당자에게 전달받은 값 계정 정보 가져오기 API 로도 확인	`setInit` · `partnerUniqueId` 쿼리
클립 ID	어드민 클립 목록 클립 목록 조회 API 로도 확인	`setInit` · `clipId` 쿼리
컨피그 설정	모비두 담당자에게 요청	닫기 동작·댓글 등 플레이어 기본 동작