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 | 화면 노출 요소 설정 (자세한 내용은 UI 옵션을 참고하세요.) | - |
isFullScreen | true 디바이스 혹은 브라우저 전체 영역을 가득 채웁니다. 영역이 세로로 긴 경우 영상의 위/아래가 크롭되고 가로로 긴 경우 영상의 양쪽이 크롭됩니다.false 비율 유지 | 자동 선택 |
isContainerFit | true 고객사가 명시적으로 사이즈를 지정한 div 영역 내에 플레이어를 가득 채웁니다. 이 설정을 켜면 isFullScreen 은 무시합니다.false 적용하지 않습니다. | false |
hasNoAddressBar | true 주소입력창이 없는 경우(앱)false 일반 브라우저 | false |
useExtendedLayout | true 상단 상태바까지 컨텐츠가 꽉찬 경우false 일반적인 경우 | false |
adId | adId 를 설정하여 사용자의 유입 경로를 추적할 수 있습니다.임의의 문자열로 구성할 수 있으며 데이터인사이트 > 데이터 다운로드 > 전체 사용자 엑셀 데이터에서 확인할 수 있습니다. | - |
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 + '¶meter=' + '{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,
adId: 'YOUR_AD_ID', // 유입경로 분석을 위한 광고Id/채널Id 등.
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 over 1 year ago