기본 플로팅

load 전에 setFloatingType 을 호출해 페이지를 열자마자 플레이어를 작은 창으로 띄우는 구성입니다.

기본 플로팅 — 소스클립 플레이어

⏱ 예상 소요 시간: 10분

📋 사전 조건: 라이브러리 설치 완료

전체 코드

setInit 과 load 사이에 setFloatingType 을 한 줄 넣습니다.

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.setFloatingType({ type: 'basic', size: 0.3 })
  window.SauceClipPlayerLib.load()
</script>

마운트 요소의 자리

플로팅 모드에서는 마운트 요소가 position: fixed 로 바뀌어 문서 흐름에서 빠집니다. 그 자리에 있던 다른 요소들이 위로 올라옵니다.

📌 플로팅으로만 쓸 페이지에서는 마운트 <div> 를 <body> 끝에 두어 본문 레이아웃과 분리합니다.

클릭 동작

플로팅 모드의 플레이어를 탭하면 재생·일시정지가 전환됩니다. 이 동작을 다른 것으로 바꾸려면 sauceclipTogglePlay 브릿지 이벤트를 정의합니다.

상황	동작
브릿지 이벤트를 정의하지 않음	재생·일시정지 전환
`sauceclipTogglePlay` 정의	정의한 함수만 실행되고 재생 상태는 그대로
드래그로 옮기는 중(PC)	클릭으로 처리하지 않음

📍 sauceclipTogglePlay 는 플로팅 모드에서만 전송됩니다. 전체 화면 상태의 탭은 언제나 재생·일시정지 전환입니다.

해제

resetFloatingType 을 호출하면 원래 자리와 크기로 돌아갑니다.

javascript

window.SauceClipPlayerLib.resetFloatingType()

다음 단계

상품 페이지 연동 플로팅 — 상품 클릭 시점에 축소하기

→

Updated about 4 hours ago

Did this page help you?