Prebid.js 連携

プレイヤーは VAST 入札を再生するだけで、入札の取得は Prebid.js などが担います。ここでは Prebid.js の入札をプレイヤーに渡す実戦的な配線を示します。

入札はそのまま渡せます

プレイヤーの bid は Prebid の video 入札のサブセット（mediaType / adUnitCode / vastXml / vastUrl / width / height）です。変換は不要で、Prebid の入札オブジェクトをそのまま bid に渡せます（余分なフィールドは無視されます）。

リワード：入札を取得して渡す

video の広告枠を定義 → 入札をリクエスト → 落札した入札をプレイヤーに渡します。

<div id="reward-slot"></div>
<script src="https://cdn.michao-ssp.com/player/v1/reward.js"></script>
<script>
  window.pbjs = window.pbjs || { que: [] };

  pbjs.que.push(() => {
    pbjs.addAdUnits([{
      code: "reward",
      mediaTypes: {
        video: { context: "outstream", playerSize: [640, 360], mimes: ["video/mp4"] },
      },
      bids: [/* 利用するビッダー */],
    }]);

    pbjs.requestBids({
      timeout: 1500,
      bidsBackHandler: () => {
        const [bid] = pbjs.getHighestCpmBids("reward");
        if (!bid) return; // 入札なし（no fill）

        window.michao.createRewardPlayer({
          target: "reward-slot",
          bid,
          reward: "コイン50枚",
          callbacks: { onReward: () => grantReward() },
        });
      },
    });
  });
</script>

アウトストリーム：Prebid の renderer で配線する

アウトストリームは、フォーマット個別の mediaTypes.video.renderer に renderer を付けるのが定石です（マルチフォーマットの広告枠でも video にだけ適用されます）。落札時に Prebid が render(bid) を呼ぶので、その中でプレイヤーを生成します。

pbjs.que.push(() => {
  pbjs.addAdUnits([{
    code: "feed-slot",
    mediaTypes: {
      video: {
        context: "outstream",
        playerSize: [640, 360],
        mimes: ["video/mp4"],
        renderer: {
          url: "https://cdn.michao-ssp.com/player/v1/outstream.js",
          render: (bid) => {
            window.michao.createOutstreamPlayer({
              target: "feed-slot",
              bid,
            });
          },
        },
      },
    },
    bids: [/* 利用するビッダー */],
  }]);

  pbjs.requestBids({ timeout: 1500 });
});

renderer の読み込み

renderer.url に置いたスクリプトは Prebid が読み込みます。render の中で window.michao.createOutstreamPlayer を呼べるよう、同じバンドル URL を指定しておけば追加の <script> は不要です。

Google アドサーバー（IMA）と連携する

mode: "ima" は Google IMA SDK で再生します。IMA は Google アドサーバー（GAM）の video 広告タグを要求するため、生の入札（VAST）をそのまま渡すだけでは動きません。Prebid の入札を含んだ広告タグ URL を buildVideoUrl で組み立て、それを渡します。

pbjs.que.push(() => {
  pbjs.requestBids({
    timeout: 1500,
    bidsBackHandler: () => {
      // Prebid の落札情報を含んだ GAM の video 広告タグ URL を生成
      // （bid を省略すると最高 CPM の入札が使われます）
      const adTagUrl = pbjs.adServers.gam.buildVideoUrl({
        adUnit: videoAdUnit,        // 対象の ad unit オブジェクト
        params: { iu: "/12345/your-video-slot" },
      });

      window.michao.createRewardPlayer({
        target: "reward-slot",
        mode: "ima",
        bid: {
          mediaType: "video",
          adUnitCode: "reward",
          vastUrl: adTagUrl,    // ← GAM の広告タグ URL
          width: 640,
          height: 360,
        },
      });
    },
  });
});

IMA は広告タグが必須

mode: "ima" では、buildVideoUrl で作った GAM の広告タグ URL を vastUrl に渡してください。落札した入札の VAST（vastXml）をそのまま渡す使い方は normal モード向けで、IMA では想定どおり動きません。normal（標準の VAST 再生）であれば、生の入札をそのまま渡せます。

各オプションの詳細は API リファレンス を参照してください。