클립 링크 유지

스와이프하면 페이지 주소의 clipId 가 현재 클립으로 바뀝니다. 새로고침이나 링크 공유로 같은 클립을 다시 여는 방법을 다룹니다.

클립 링크 유지 — 소스클립 플레이어

⏱ 예상 소요 시간: 10분

🔧 필수/선택: 선택 — 적용하지 않으면 새로고침 시 처음 클립으로 돌아감

주소가 바뀌는 시점

플레이어가 다음 클립으로 넘어갈 때마다 라이브러리가 페이지 주소의 쿼리를 갱신합니다. 페이지 경로는 그대로입니다.

시점	주소 변화
첫 클립 목록 로드	`clipId` 가 실제 재생 중인 클립으로 설정
위아래 스와이프	`clipId` 가 넘어간 클립으로 갱신

📍 주소만 바뀌고 페이지는 다시 로드되지 않습니다. 새로고침하거나 그 주소를 공유해서 열면 setInit 에 넣은 값으로 다시 시작합니다.

새로고침·공유 대응

주소의 clipId 를 읽어 setInit 에 넘기면 보던 클립에서 다시 시작합니다. 값이 없을 때 쓸 기본 클립 ID를 함께 둡니다.

html

<div id="sauce_clip_player"></div>

<script src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
<script>
  const params = new URLSearchParams(window.location.search)
  const clipId = params.get('clipId')

  window.SauceClipPlayerLib.setInit({
    partnerUniqueId: '파트너 ID',
    clipId: clipId || '클립 ID'  // 주소에 없으면 기본 클립
  })
  window.SauceClipPlayerLib.load()
</script>

유지되지 않는 쿼리 파라미터

주소를 갱신할 때 라이브러리가 쿼리 전체를 다시 씁니다. 자사몰이 쓰던 다른 쿼리 파라미터는 이 시점에 사라집니다.

파라미터	갱신 후
`partnerUniqueId` · `clipId` · `curationId`	라이브러리가 다시 씀
`htmid`	유지 — 고도몰이 쓰는 페이지 식별 값
그 밖의 자사몰 쿼리	제거

⚠️ 페이지 주소의 쿼리로 상태를 관리하는 화면에는 라이브러리 방식이 맞지 않습니다. 플레이어를 URL 연동으로 별도 페이지에서 열거나, 자사몰 상태를 쿼리 밖에 두는 구성을 씁니다.

다음 단계

플로팅 플레이어 — 작은 창으로 띄우는 세 가지 구성

→

Updated about 4 hours ago

Did this page help you?