ショートフォームのプレイリストを作成

これにより、Shortformのプレイリストを自分で構成できます。

• ショートフォームリストの順番を自分好みに整理して、その順番でプレイすることができます。

• Shortformでプレイしているときにプレイリストにアイテムを追加することもできます。

• Shortform プレイリストの最後に到達したら、MessageCallback を提供して、新しいリストをアタッチできるようにします。

ショートフォームがプレイされるプレーヤーを希望の順序で起動します

Shortform API を通じて受け取った shortformId は、プレイリストを作成し、順番に再生するために使用されます。

• ショートフォーム一覧の実装

• ショートフォーム プレビュー再生(PIPモード) の実装

• 高度な設定 - モーダルプレイヤーの表示

// ショートフォームIDによるプレイリストの設定
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 } );

MessageCallback (プレイリストの末尾に達したとき)

MessageCallback イベント名は NEEDS_SHORTFORM_LIST_MORE詳細については、以下のガイドを参照してください。

• ショートフォーム - 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 ペイロード

サンプルコード

この例では、Shortform API を使用して shortformIds を読み込んで再生し、リストがすべて再生されたときに追加の shortformIds を追加するローカル サービスを使用します。

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

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

  //idsリストをインポートした後、startIndex番目のShortformからプレイする。
  async function showPlayer() {
    const ids = await getShortformId();
    cloud.shoplive.showShortformPlayerModal({ ids: ids, startIndex: startIndex });
  }

</script>