Shortform 고급설정
Shortform의 Playlist를 직접 구성할 수 있는 기능을 제공합니다.
- Shortform 목록의 순서를 원하는대로 구성하고 그 순서대로 플레이 할 수 있습니다
- Shortform의 재생중에도 playlist에 항목을 추가할 수 있습니다
- Shortform playlist 의 끝에 도달하면 새로운 리스트를 붙일 수 있도록 MessageCallback을 제공합니다
원하는 순서로 Shortform이 재생되는 플레이어 실행
Shortform API를 통해 받아온 shortformId를 통해 playlist를 구성하고 순서대로 재생합니다.
관련링크
Parameters
Key Type description ids string[] shortformid의 배열 (최대 30개의 shortformId) startIndex number ids 배열에서 play가 시작될 index
// Shortform ID를 통하여 playlist 구성
var ids = ["ID1", "ID2", "ID3", "ID4", "ID5"];
// 재생이 시작할 startIndex 설정
var startIndex = 2;
cloud.shoplive.showShortformPlayerModal( { ids:ids, startIndex:startIndex } );
플레이할 숏폼의 목록을 피드에 추가
Parameters
Key Type description ids string[] 추가될 shortformid의 배열 (최대 30개의 shortformId)
var ids= ["ID6", "ID7", "ID8"];
cloud.shoplive.shortformPlayerAppendList( { ids:ids } );
Playlist의 끝에 도달하였을때의 MessageCallback
관련링크
MessageCallback 이벤트명 : NEEDS_SHORTFORM_LIST_MORE
Payload
Payload Type description index number 현재 보여지고 있는 숏폼의 index shortsList Shorts[] 현재 플레이어 피드를 구성하고 있는 숏폼 목록의 배열
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 } );
샘플코드
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>