Video progress tracking

    Video progress tracking


    Article summary

    This page guides how to receive video progress-related events using the messageCallback.

    Installation sample code

    Install the below code to the common layout of the page

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      const messageCallback = {
                DETAIL_ACTIVE: (payload) => {
                //This messageCallback event indicates that Shortform video started to play
                    console.log(`(DETAIL_ACTIVE) shortsId:${payload.shorts.shortsId}`, payload)
                },
                DETAIL_VIEWING_SECONDS: (payload) => {
                //this messageCallback event fired every 1~3 seconds. (per 1seconds until 3s, and per 3seconds afterwards)
                    console.log(`(DETAIL_VIEWING_SECONDS) shortsId:${payload.shorts.shortsId}`, payload)
                },
                DETAIL_ON_PLAYER_DISMISS: () => {
                //This messageCallback event indicates that Shortform video dismissed from screen
                    console.log(`(DETAIL_ON_PLAYER_DISMISS)`)
                },
            }
      
      cloud.shoplive.initShortform({ 
        accessKey: 'YOUR ACCESS KEY HERE', 
        messageCallback: messageCallback 
      });
    </script>

    Messages & Payload

    The following is a list of video progress-related events that can be directly handled by the messageCallback setting.

    DETAIL_ACTIVE

    On activating Shortform Detail (Shortform video play within the feed)

    Payload

    Type

    shorts

    Shorts

    DETAIL_ON_PLAYER_DISMISS

    On closing Shortform Detail (Shortform video play within feed)

    Payload

    Type

    N/A

    N/A

    DETAIL_VIEWING_SECONDS

    This event fires with 3 seconds interval when watching a Shortform detail video

    Payload

    Type

    shorts

    Shorts

    videoCurrentTime

    number


    What's Next