Guides

소스클립 플레이어 v1.0.2

Suggest Edits

1. 소개

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

소스클립 플레이어에서 제공하는 이벤트에 대한 가이드 입니다.

2-1. 연동 방법 (기본 - 소스클립 플레이어 랜딩)

기본적으로는 소스클립의 기능을 그대로 사용합니다.

그 외 파트너사 자사몰에 연동하는 경우는 아래 JSON필드 내용 예시를 참고해 적용합니다.

  • 소스클립 입장
    • 기본 동작은 없습니다.
  • 공유하기
    • SNS (ex. kakao, facebook) 공유하기는 지원하지 않으며, 주소 복사하기 기능만 가능합니다.
  • 소스클립 닫기 URL
    • 기본 동작은 history.back() 입니다.

{
    /* 닫기버튼 관련(❌ 뒤로가기시와 다르게 동작합니다.) */
    "close": {
        /* 히스토리 방법 */                
        /* Type "href" | "replace" defaultValue "href" href= "히스토리 추가되어 동작",replace="현재 페이지 히스토리를 변경" */
        "history": "href",
        /* 모바일주소 */
        /* Type string | null defaultValue null*/
        /* 예시) "https://space.sauceflex.com"*/
        "mobile": null,
        /* PC주소 */
        /* Type string | null */
        /* 예시) "https://space.sauceflex.com"*/
        "pc": null,
        /* 웹뷰스킴 호출 */
        /* Type string | null */
        /* 적용 예시) "webivew":"sauceclipapp://close" */
        "webview": null
    },
    /* 방송 테마 설정 */
    /* Type RGB color */
    /* 예시) "222,46,95*/
    "theme": {
        "bgColor": null
    },
    /* 상점 정보 노출 설정 */
    /* Type true || false // default true */
    /* 예시) true */
    "store": {
        "isStore": true
    }
}

//  적용안(참고용)
{
    "close": {
        "history": "href",
        "mobile": "https://space.sauceflex.com",
        "pc": "https://space.sauceflex.com",
        "webview": null
    },
    "theme": {
        "bgColor": "222,46,95"
    },
    "store": {
        "isStore": true
    }
}

📘

https://player.sauceclip.com/player?clipId={소스클립ID}&partnerId={파트너ID}

  • WebView에서 플레이어 연동 시 참고 사항
    • iOS X 이상의 기기에서 플레이어 화면 잘림 현상을 방지하기 위해 SafeArea 영역 설정을 필히 진행해 주시기 바랍니다.
    • Android Webview에서 재생 아이콘 표시 없이 영상이 재생되는 것을 원하실 경우에는 아래 코드를 활용해주세요. (해당 가이드는 파트너사 AOS앱 개발팀에서 진행)
      • override fun getDefaultVideoPoster(): Bitmap? { return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

2-2. 연동 방법 (Iframe)

STEP1. 기능 사용 여부 ⭐️ stage, prod 환경 설정 - 궁금한 내용은 카카오톡, 채널톡 또는 담당자 이메일 [email protected] 문의

{
    /* 닫기버튼 설정 */
    "close": {
        "history": "href",
        "mobile": "https://space.sauceflex.com",
        "pc": "https://space.sauceflex.com",
        "webview": null
    },
    /* 방송 테마 설정 */
    "theme": {
        "bgColor": "222,46,95"
    },
    /* 상점 정보 노출 설정 */
    "store": {
        "isStore": true
    }
}

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

  • 공유하기

    • // event.data
{
    key: 'sauceclipOnShare',
    params: {
        linkUrl: String // 공유 된 소크클립 방송 url
    }
}

2-3. 연동방법 (Webview)

Bridge & Message

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

  • sauceclipEnter(Void) - 페이지 진입시 자동으로 호출

    • // 파라미터 없음

  • sauceclipMoveExit(Void)

    • // 파라미터 없음

  • sauceclipMoveProduct(message: String)

    • // Stringified JSON
{
    linkUrl: String | null, // 상품 상세 정보의 url
    clipIdx: String     // 소스클립 방송 ID
}

  • sauceclipOnShare(message: String)

    • // Stringified JSON
{
    linkUrl: String // 공유 된 소스클립 방송 url
}

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()
        }
    }
 
}

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
 
            default:
                print("message.name \\(message.name) not handled.")
        }
    }
}

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

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

Updated 7 months ago