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);

Did this page help you?