Video progress tracking

    Video progress tracking


    기사 요약

    이 페이지는 Video Progress를 체크할 수 있는 messageCallback에 관련된 내용을 가이드합니다.

    설치 예시

    아래와 같이 messageCallback을 설정합니다.

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      const messageCallback = {
                DETAIL_ACTIVE: (payload) => {
                // 이 messageCallback 이벤트는 Shortform 동영상이 재생되기 시작했음을 나타냅니다
                    console.log(`(DETAIL_ACTIVE) shortsId:${payload.shorts.shortsId}`, payload)
                },
                DETAIL_VIEWING_SECONDS: (payload) => {
                // 이 messageCallback 이벤트는 매 1~3초마다 실행됩니다. (3초까지는 1초마다, 그 이후에는 3초마다)
                    console.log(`(DETAIL_VIEWING_SECONDS) shortsId:${payload.shorts.shortsId}`, payload)
                },
                DETAIL_ON_PLAYER_DISMISS: () => {
                // 이 messageCallback 이벤트는 Shortform 동영상이 화면에서 사라졌음을 나타냅니다
                    console.log(`(DETAIL_ON_PLAYER_DISMISS)`)
                },
            }
      
      cloud.shoplive.initShortform({ 
        accessKey: 'YOUR ACCESS KEY HERE', 
        messageCallback: messageCallback 
      });
    </script>


    Messages & Payload

    DETAIL_ACTIVE

    숏폼 디테일이 활성화 되는 시점에 발생

    Payload

    Type

    shorts

    Shorts

    DETAIL_ON_PLAYER_DISMISS

    숏폼 디테일이 닫힐 때 발생

    Payload

    Type

    N/A

    N/A

    DETAIL_VIEWING_SECONDS

    숏폼 디테일을 보고 있을 때 3초 간격으로 발생

    Payload

    Type

    shorts

    Shorts

    videoCurrentTime

    number