모달 플레이어 재생 리스트 직접 구성하기

Shortform의 Playlist를 직접 구성할 수 있는 기능을 제공합니다.

• Shortform 목록의 순서를 원하는대로 구성하고 그 순서대로 플레이 할 수 있습니다.

• Shortform의 재생중에도 playlist에 항목을 추가할 수 있습니다.

• Shortform playlist 의 끝에 도달하면 새로운 리스트를 붙일 수 있도록 MessageCallback을 제공합니다.

원하는 순서로 Shortform이 재생되는 플레이어 실행

Shortform API를 통해 받아온 shortformId를 통해 playlist를 구성하고 순서대로 재생합니다.

• 숏폼 컬렉션 설치

• 숏폼 프리뷰 설치

• 모달 플레이어 단독 실행

// Shortform ID를 통하여 playlist 구성
var ids = ["ID1", "ID2", "ID3", "ID4", "ID5"];
// 재생이 시작할 startIndex 설정
var startIndex = 2;
cloud.shoplive.showShortformPlayerModal( { ids:ids, startIndex:startIndex } );

플레이할 숏폼의 목록을 피드에 추가

var ids= ["ID6", "ID7", "ID8"];  
cloud.shoplive.shortformPlayerAppendList( { ids:ids } );

Playlist의 끝에 도달했을 때의 MessageCallback

MessageCallback 이벤트명은 NEEDS_SHORTFORM_LIST_MORE입니다. 좀 더 자세한 내용은 아래의 가이드를 참고하세요.

• Shortform MessageCallback 사용 가이드

var messageCallback = {
  NEEDS_SHORTFORM_LIST_MORE : function(payload) {
    console.log("숏폼 플레이어에서 마지막 숏폼에 도달");
    console.log("현재 플레이어 피드의 전체 목록 : ", payload.shortsList)
    console.log("현재 보여주고 있는 숏폼의 index : ", payload.index)

    // 현재 보고 있는 피드에 목록을 더한다.
    var ids= ["ID6", "ID7", "ID8"];
    cloud.shoplive.shortformPlayerAppendList( { ids } ); 
  },
}
cloud.shoplive.initShortform( { accessKey: "ACCESS_KEY",  messageCallback: messageCallback } );

messageCallback payload

Sample code

Shortform API를 사용하는 local service를 사용하여 shortformId를 로드해 플레이 하고 목록을 모두 플레이하면 추가의 shortformId 를 append 하는 예제입니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>

<div id="shoplive-shortform"></div>

<script>
  const ACCESS_KEY = "<YOUR_ACCESS_KEY>";
  let startIndex = 0;

  //리스트중 마지막 Shortform에 도달했을때 수행할 콜백을 정의
  let messageCallback = {
    NEEDS_SHORTFORM_LIST_MORE: async function (payload) {
      console.log("숏폼 플레이어에서 마지막 숏폼에 도달");

      //새로운 shortformId를 가져와 shortform play목록에 append
      const ids = await getShortformId();
      cloud.shoplive.shortformPlayerAppendList({ ids });
    },
  };

  //Shortform의 init()
  cloud.shoplive.initShortform({
    accessKey: ACCESS_KEY,
    messageCallback: messageCallback,
  });

  //Shortform API를 사용하는 내부 서비스를 통해 ShortformId를 가져온다.
  const getShortformId = (function () {
    let page = 1;
    return function () {
      return fetch(`<API_SERVICE_ADDRESS>?page=${page}`)
        .then((response) => response.json())
        .then((data) => {
          const shortformIds = data.map((e) => String(e.shortformId));
         
            // 이후 호출에 사용할 page를 증가시킨다.
          page++;

          return shortformIds;
        });
    };
  })();

  //ids목록을 가져온후 startIndex번째 Shortform부터 플레이 한다.
  async function showPlayer() {
    const ids = await getShortformId();
    cloud.shoplive.showShortformPlayerModal({ ids: ids, startIndex: startIndex });
  }

</script>