Prebid.js integration

The player only plays back VAST bids; fetching the bids is handled by Prebid.js or similar. This page shows the practical wiring for passing Prebid bids to the player.

Bids can be passed as-is

The player's bid is a subset of a Prebid video bid (mediaType / adUnitCode / vastXml / vastUrl / width / height). No conversion is needed — you can pass the Prebid bid object straight into bid (extra fields are ignored).

Reward: fetch a bid and pass it

Define the video ad slot, request bids, then pass the winning bid to the player.

<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: [/* the bidders you use */],
    }]);

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

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

Outstream: wire it up with Prebid's renderer

For outstream, the standard approach is to attach a renderer to the format-specific mediaTypes.video.renderer (so it applies only to video, even on a multi-format ad slot). On a winning bid, Prebid calls render(bid), and you create the player inside it.

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: [/* the bidders you use */],
  }]);

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

Loading the renderer

Prebid loads the script placed at renderer.url. Point it at the same bundle URL so that window.michao.createOutstreamPlayer is available inside render, and no extra <script> is needed.

Integrating with Google Ad Manager (IMA)

mode: "ima" plays back through the Google IMA SDK. Because IMA requires a Google Ad Manager (GAM) video ad tag, simply passing a raw bid (VAST) does not work. Build an ad tag URL that includes the Prebid bid with buildVideoUrl, and pass that.

pbjs.que.push(() => {
  pbjs.requestBids({
    timeout: 1500,
    bidsBackHandler: () => {
      // Generate a GAM video ad tag URL that includes the Prebid winning bid
      // (omit bid to use the highest-CPM bid)
      const adTagUrl = pbjs.adServers.gam.buildVideoUrl({
        adUnit: videoAdUnit,        // the target ad unit object
        params: { iu: "/12345/your-video-slot" },
      });

      window.michao.createRewardPlayer({
        target: "reward-slot",
        mode: "ima",
        bid: {
          mediaType: "video",
          adUnitCode: "reward",
          vastUrl: adTagUrl,    // <- the GAM ad tag URL
          width: 640,
          height: 360,
        },
      });
    },
  });
});

IMA requires an ad tag

With mode: "ima", pass the GAM ad tag URL built by buildVideoUrl as vastUrl. Passing the winning bid's VAST (vastXml) directly is for normal mode and will not work as intended with IMA. In normal mode (standard VAST playback), you can pass the raw bid as-is.

See the API reference for details on each option.