소개

소스클립 영상 주소로 접근했을 때 보여지는 페이지입니다. 일반적으로 브라우저에서 그대로 사용하시면 됩니다.

현재 제공되는 방식의 URL 은 아래와 같습니다.
https://player.sauceclip.com/player?clipId={클립ID}&partnerId={임의의파트너ID}&curationId={임의의큐레이션ID}

자사몰 페이지에 연동 방법 (iframe)

STEP 2. 방송 페이지를 `iframe` 을 이용하여 페이지에 추가 합니다.

<!-- 방송 주소 -->
<iframe src="https://player.sauceclip.com/player?clipId={소스클립ID}&amp;partnerId={파트너ID}&gt;"&gt;</iframe>
<!-- 외부 유입 코드를 사용하려면 iframe을 그리기 전 요청받은 파라미터를 전달해줘야 합니다. 부모페이지에 호출된 queryString key중 fc 의 값을 전달해주셔야 합니다. -->
<!-- example -->
<iframe src="https://player.sauceclip.com/player?clipId={소스클립ID}&amp;partnerId={파트너ID}&amp;fc=value"></iframe>

STEP 3. 자바스크립트 window 객체에 'message' 이벤트를 수신하고 각 이벤트에 대해서 적절히 처리합니다.

window.addEventListener(
    "message",
    function(e) {
        // 이곳에 처리
        console.log(e.data);
    }, false
);

STEP 4. 메시지는 이벤트의 'data' 를 통해 JSON Type으로 전달됩니다. 각 이벤트는 아래와 같습니다.

// 페이지 진입시 event.data
{
    key: 'sauceclipEnter',
    params: null
}

//소스클립 종료 (나갈 때) event.data
{
    key: 'sauceclipMoveExit',
    params: null
}

//- 상품 클릭 event.data
{
    key: 'sauceclipMoveProduct',
    params: {
        linkUrl: String | null, // 상품 상세 정보의 url
        clipIdx: String     // 소스클립 방송 ID
        productId: String, // 소스클립 상품 ID
        externalProductId: String // 등록된 상품코드
    }
}

// - 공유하기 event.data 
{
    key: 'sauceclipOnShare',
    params: {
        linkUrl: String // 공유 된 소스클립 방송 url
        clipId: String // 현재의 클립ID
        partnerId: String // 현재의 파트너ID
        curationId: String // 현재의 큐레이션ID
        thumbnailUrl: String // 등록한 썸네일 URL
        title: String // 클립 타이틀
        tags:: Array // 등록된 태그들   
     }
}

// - 카트 클릭시 event.data 
{
    key: 'sauceclipMoveCart',
    params: {
        clipIdx: String // 현재의 클립ID
        productId: String // 소스클립 상품 ID
        price: String // 현재 상품의 가격
        productImg: String // 상품이미지 URL
        productName: String // 상품명
        externalProductId: String // 등록된 상품코드
    }
}

2-3. 연동방법 (Webview)

Bridge & Message

아래와 같은 Bridge로 메시지가 전달됩니다. 각 메시지는 JSON 객체가 stringify 되어 전달 됩니다.

sauceclipEnter(Void) - 페이지 진입시 자동으로 호출
- ```
// 파라미터 없음
```
sauceclipMoveExit(Void)
- ```
// 파라미터 없음
```

sauceclipMoveProduct(message: String)

// Stringified JSON
{
    linkUrl: String | null, // 상품 상세 정보의 url
    clipIdx: String     // 소스클립 방송 ID
    productId: String, // 소스클립 상품 ID
    externalProductId: String, // 등록된 상품코드
}

sauceclipOnShare(message: String)

// Stringified JSON
{
    linkUrl: String // 공유 된 소스클립 방송 url
    clipId: String // 현재의 클립ID
    partnerId: String // 현재의 파트너ID
    curationId: String // 현재의 큐레이션ID
    thumbnailUrl: String // 등록한 썸네일 URL
    title: String // 클립 타이틀
    tags:: Array // 등록된 태그들
}

sauceclipMoveCart(message: String)

// Stringified JSON
{
    clipIdx: String // 현재의 클립ID
    productId: String // 소스클립 상품 ID
    price: String // 현재 상품의 가격
    productImg: String // 상품이미지 URL
    productName: String // 상품명
    externalProductId: String, // 등록된 상품코드
}

📘
WebView에서 플레이어 연동 시 참고 사항

iOS X 이상의 기기에서 플레이어 화면 잘림 현상을 방지하기 위해 SafeArea 영역 설정을 필히 진행해 주시기 바랍니다.

Android Webview에서 재생 아이콘 표시 없이 영상이 재생되는 것을 원하실 경우에는 아래 코드를 활용해주세요. (해당 가이드는 파트너사 AOS앱 개발팀에서 진행)

override fun getDefaultVideoPoster(): Bitmap? { return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

Android

안드로이드의 경우 "sauceclip" 이름을 가진 브릿지 중 해당 브릿지가 있는 경우 메시지를 전달하게 되며, 기본 동작은 취소됩니다.

import android.os.Handler
import android.webkit.JavascriptInterface
import android.widget.Toast
 
class AndroidBridge(private val activity: MainActivity) {
    private val handler = Handler()
 
    @JavascriptInterface
    fun sauceclipEnter() {
        handler.post {
            Toast.makeText(activity, "sauceclipEnter", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveExit() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveExit", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveProduct(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveProduct \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipOnShare(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipOnShare \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
    @JavascriptInterface
    fun sauceclipMoveCart() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveCart", Toast.LENGTH_SHORT).show()
        }
    }
 
}

iOS

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                                    didReceive message: WKScriptMessage) {
        switch (message.name) {
            case "sauceclipEnter":
                print("sauceclipEnter")
                break
 
            case "sauceclipMoveExit":
                print("sauceclipMoveExit")
                break
 
            case "sauceclipMoveProduct":
                print("sauceclipMoveProduct")
                print(message.body)
                break
 
            case "sauceclipOnShare":
                print("sauceclipOnShare")
                print(message.body)
                break
            case "sauceclipMoveCart":
                print("sauceclipMoveCart")
                print(message.body)
                break     
 
            default:
                print("message.name \\(message.name) not handled.")
        }
    }
}

🚦본 문서는 부정 경쟁 방지 및 영업 비밀 보호에 관한 법령에 따라 보호의 대상이 되는 영업 비밀, 산업 기술을 포함합니다.

🚦본 문서에 포함된 정보의 전부 또는 일부를 무단으로 제 3자에게 공개, 배포, 복사 또는 사용하는 것은 엄격히 금지됩니다.

소개