init 함수

Shoplive 클라이언트를 초기화하기 위한 함수입니다. 개별 고객사에 발급한 access_key와 개별 방송을 생성할 때 발급 받은 campaign_key를 입력하고 인증 방식에 따른 user_authorization 값과 Shoplive 클라이언트를 설정하는 options을 파라미터로 전달합니다.

mplayer("init", access_key, campaign_key, user_authorization, options)
파라미터타입설명필수샘플
access_keystring고객사 계정 별로 발급한 Access Key필수uv9CGt1PzXvsInQerCw
campaign_keystring개별 방송(캠페인)에 부여되는 고유한 key. 빈 값인 경우 가장 가까운 날짜의 캠페인이 지정됩니다.필수PzlvsInZ
authorizationjson or string사용자 인증 정보. 게스트의 경우엔 빈값을 입력합니다. 일반 인증의 경우에는 JSON Object를 사용하고 JWT 인증의 경우에는 JWT 문자열을 사용합니다.필수 아님인증방식에 따라 다름
사용자 인증하기를 참고해주세요.
optionsjson or string추가 옵션필수 아님

Init 함수에서 사용할 수 있는 option

option 파라미터로 다양한 설정을 할 수 있습니다. messageCallback을 통해 쿠폰 다운로드, 상품 클릭과 같이 미리 정해진 action에 대한 정의를 할 수 있고 고객사 별로 커스텀 액션을 정의할 수도 있습니다. SHOPLIVE 플레이어의 화면에 노출되는 다양한 요소들을 설정할 수 있는 ui옵션도 제공합니다.

파라미터설명기본값
messageCallback미리 정해진 action이 있고 별도로 커스텀 액션을 정의할 수 있습니다.-
ui화면 노출 요소 설정 (자세한 내용은 UI 옵션을 참고하세요.)-
isFullScreentrue 디바이스 혹은 브라우저 전체 영역을 가득 채웁니다. 영역이 세로로 긴 경우 영상의 위/아래가 크롭되고 가로로 긴 경우 영상의 양쪽이 크롭됩니다.
false 비율 유지
자동 선택
isContainerFittrue 고객사가 명시적으로 사이즈를 지정한 div 영역 내에 플레이어를 가득 채웁니다. 이 설정을 켜면 isFullScreen은 무시합니다.
false 적용하지 않습니다.
false
hasNoAddressBartrue 주소입력창이 없는 경우(앱)
false 일반 브라우저
false
useExtendedLayouttrue 상단 상태바까지 컨텐츠가 꽉찬 경우
false 일반적인 경우
false
hideControlstrue 영상을 제외하고 모든 UI 요소를 숨깁니다.
false 모든 UI 요소를 표시합니다.
false

messageCallback

actionpayload설명
REQUEST_LOGIN없음Guest로 플레이어를 실행한 상태에서 플레이어에서 로그인 정보가 필요한 경우 호출됩니다. (예, Guest로 라이브 시청 중 채팅 버튼을 클릭할 경우) 로그인 화면으로 이동하는 코드를 삽입하여 사용할 수 있습니다.
ERRORcode (int32)
msg (string)
에러 발생시 에러코드(code)와 에러메시지(string)를 전달합니다.
에러코드는 여기서 확인하세요.
DOWNLOAD_COUPONcoupon (string)
type(string)
팝업(배너, 쿠폰, 공지)을 클릭할 때 타입과 함께 설정해놓은 값을 전달합니다.
type (발생 타입) - BANNER, COUPON, NOTICE
CLICK_PRODUCTjson object
PAYLOAD
상품 정보가 클릭되었을 경우 호출됩니다. 상품 상세 페이지 이동을 위한 URL을 받아서 별도의 처리가 필요한 경우 활용할 수 있습니다.
* CLICK_PRODUCT을 별도로 처리하지 않아도 플레이어에서 상품을 클릭하면 해당 URL로 이동하도록 되어 있습니다. (새창으로 이동. 만약 현재 창에서 이동하고자 할 경우 아래의 샘플 코드를 참고하시기 바랍니다)
CLICK_PRODUCT_CARTjson object
PAYLOAD
상품 리스트 내 장바구니 버튼을 클릭했을 경우 호출됩니다. 별도의 처리가 필요한 경우 활용할 수 있도록, 상품의 여러가지 정보가 payload 에 포함됩니다.
{
"sku" : string,
"name": string,
"brand": string,
"url" : string
}
LINKjson object
{"url": linkUrl}
팝업(배너, 쿠폰, 공지)에서 클릭 이벤트를 링크로 설정했거나 상품 목록 상단 링크를 클릭할 때 링크 주소와 함께 호출됩니다. 별도로 구현(override)하지 않는 경우 웹에서는 페이지 자체가 이동되며 (현재 라이브 페이지 이탈) 앱(SDK)의 경우 PIP 모드로 진입하고 NAVIGATION이 호출됩니다.
LINK_NEW_WINDOWjson object
{"url": linkUrl}
팝업(배너, 쿠폰, 공지)에서 클릭 이벤트를 링크(새창 열기)로 설정했을 때 사용자가 링크를 클릭하면 링크 주소와 함께 호출됩니다. 별도로 구현(override)하지 않는 경우 웹에서는 새창에 linkUrl을 띄우며 앱(SDK)의 경우 PIP 모드로 진입하고 NAVIGATION이 호출됩니다.
CLICK_SHARE_BTN없음공유 버튼이 클릭되었을 경우 호출됩니다.
REQUEST_PICTURE_IN_PICTURE없음PIP 모드 요청
CLOSE_PLAYER없음플레이어 닫기(뒤로가기)
VIDEO:setVideoMutevalue (bool)true 소리 켜기
false 소리 끄기
VIDEO:setPosterUrlvalue (string)방송 예고 이미지 URL
VIDEO:setBackgroundUrlvalue (string)기본 배경 이미지 URL
VIDEO:setLiveStreamUrlvalue (string)hls(m3u8) 영상의 URL
VIDEO:playVideo없음현재 설정되어 있는 liveStreamUrl을 재생
VIDEO:pauseVideo없음영상 중지
VIDEO:setVideoCurrentTimevalue (float)(리플레이 재생 시) 영상의 특정 위치로 이동. value는 초단위의 float.
예) 영상이 총 3600초라고 할 때 35.5초 구간으로 이동
VIDEO:reloadVideo없음영상 URL을 다시 세팅하는 방식으로 완전 리로딩

샘플코드

SHOPLIVE 플레이어에서 상품을 클릭했을 때 현재 창에서 상품 페이지로 이동하고자 할 경우 아래와 같이 CLICK_PRODUCT을 정의할 수 있습니다.

mplayer("init", "access_key", "campaign_key", {userId: {user_id_here}, userName: {user_name_here}, {
  messageCallback: {
    CLICK_PRODUCT: function(payload) {
      // 클릭한 상품 URL에 새로운 파라미터를 추가할 수 있습니다.
      var url = payload.url + '&parameter=' + '{your_parameter}'
      
      // 현재 창에서 상품 페이지로 이동합니다.
      location.href = url;
    }
  }
});
mplayer("run", "your_div_id");

UI 옵션

init 함수를 실행할 때 전달하는 options에서 플레이어의 UI를 설정하는 다양한 옵션을 별도로 설정할 수 있습니다. 자세한 UI Key와 설정 방식은 아래의 내용을 참고하시기 바랍니다.

UI Key설명기본값클릭 이벤트
viewerCount시청자 수노출없음
likeCount좋아요 수노출없음
optionButton옵션 버튼미노출CLICK_OPTION_BTN
shareButton공유 버튼미노출CLICK_SHARE_BTN
pipButtonPIP 버튼미노출REQUEST_PICTURE_IN_PICTURE
backButton뒤로가기 버튼미노출CLOSE_PLAYER
liveIndicator로고 옆 라이브 표시미노출없음
chatUI채팅영역 UI 표시["chat", "adminMsg", "notice"]없음
chatLine일반 채팅 메시지 표시수8줄없음
marginTop모바일 디바이스 상단으로부터 margin을 설정함 (예, marginTop: "100px")없음없음

샘플 코드

아래의 샘플 코드를 통해 messageCallback과 options을 설정하는 방법을 참고하시기 바랍니다.

var messageCallback = {
  REQUEST_LOGIN: function () {
    // 로그인이 필요할 때 호출
    alert("로그인이 필요합니다");
  },
  ERROR: function (payload) {
    // 에러처리
    console.log(payload.code); // 에러코드
    console.log(payload.msg); // 에러메시지
  },
  DOWNLOAD_COUPON: function (payload) {
    // 쿠폰 다운로드
    alert(payload.coupon + "쿠폰 다운로드 성공!");
  },
};
var options = {
  messageCallback: messageCallback,
  ui: {
    viewerCount: true,
    likeCount: true,
    shareButton: true,
    pipButton: true,
    backButton: true,
    optionButton: true,
    liveIndicator: false,
  },
};
mplayer("init", "{access_key}", "{campaign_key}", "{user_authorization}", options);