GuidesAPI Reference

Shoplive Player 기본설치

Suggest Edits

이 페이지는 Standalone 형식의 Shoplive Player를 사용하는 과정을 안내합니다. 정형화된 Shoplive Plugin의 구성을 사용하지 않는 경우 Shoplive Player를 통해 원하는 형태로 페이지를 구성할 수 있습니다.

  • 플레이어의 위치와 레이아웃을 직접 설정하여 가장 기본적인 Player 를 웹 페이지에 직접 설치합니다.
  • 컨테이너 레이아웃의 스타일을 직접 지정합니다.
  • campaignKey를 지정하여 특정 캠페인을 실행시킵니다.
  • isFullScreen 옵션을 사용하여 항상 풀 스크린으로 실행할 수 있습니다.

[1 단계 초기화 ]

  • 초기화와 함께 사용자 인증 기능을 사용하려면 사용자 초기화: 사용자 인증를 참고하세요.
  • 초기화와 함께 쿠폰 기능 연동을 위해 messageCallback 정의가 필요하면 messageCallback 를 참고하세요

별도 사용자 인증이나 messageCallback 정의 없이 숏폼을 초기화 하기 위해 공통 레이아웃(head 영역 등)에 다음 코드를 설치합니다. 다음 코드는 진행중인 방송을 미리보기 형태로 보여주는 라이브미니프리뷰 기능을 위해 모든페이지에 삽입되어야 합니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</script>


[2단계 플레이어 설치 하기]

setPlayer기능을 이용한 플레이어 설치는 실행할 campaign을 직접 제어하고 플레이어의 위치와 레이아웃을 직접 설정하여 가장 기본적인 Player 를 웹 페이지에 직접 설치합니다. 컨테이너 레이아웃의 스타일을 직접 지정합니다.

기본 사용법

<style>
  #shoplive-player {
    max-width: 360px;
    height: 612px;
    margin: auto;
  }
</style>
<div id="shoplive-player"></div>
<script defer>
  cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
</script>

컨테이너 사이즈와 무관하게 Full screen 모드로 설치하기

<div id="shoplive-player"></div>
<script defer>
  var config = { campaignKey: "YOUR_CAMPAIGN_KEY", isFullScreen: true }
  cloud.shoplive.setPlayer("shoplive-player", config);
</script>

Simple Player full example

아래는 데스크탑 화면과 모바일 사이즈 모두 지원하는 가장 심플한 플레이어 설치의 예시입니다.

<html>
  <head>
    <title>Shoplive - Simple player example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
    <script>
      var messageCallback = {
        DOWNLOAD_COUPON: function(payload) {
          console.log('User clicks coupon. coupon code :  ' + payload.coupon);
        } 
      }
      cloud.shoplive.init({ accessKey: "YOUR_ACCESS_KEY", messageCallback: messageCallback });
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
      #shoplive-player {
        max-width: calc(100vh / 16 * 9 - 2px);
        margin: auto;
      }
      @media screen and (max-width: 480px) {
        #shoplive-player {
          max-width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div id="shoplive-player"></div>
    <script defer>
      cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
    </script>
  </body>
</html>

다음단계:

Updated 28 days ago