init 함수

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

mplayer("init", access_key, campaign_key, user_authorization, options)

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

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

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

파라미터	설명	기본값
messageCallback	미리 정해진 action이 있고 별도로 커스텀 액션을 정의할 수 있습니다.
ui	화면 노출 요소 설정 (자세한 내용은 참고하시기 바랍니다)
isFullScreen	true - 가로 혹은 세로로 가득차게(세로로 긴 경우 위/아래 크롭, 가로로 긴 경우 양쪽 크롭) false - 비율 유지	자동 선택
hasNoAddressBar	true - 주소입력창이 없는 경우(앱) false - 일반 브라우저	false
useExtendedLayout	true - 상단 상태바까지 컨텐츠가 꽉찬 경우 false - 일반적인 경우	false
hideControls	true - 영상 외 컨트롤 감추기 false - 컨트롤 보이기	false
unmute *	true - 로딩 시 가능하면 소리 켜기 false - 브라우저 기본 설정(뮤트 상태)	true

📘
Android 크롬의 제한된 환경에서 자동 재생 시 소리켜기를 시도합니다. (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)

messageCallback

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

Updated 20 days ago