Add outstream ads

Outstream ads are in-feed videos inserted into articles or feeds. When the ad slot enters the viewport, it autoplays muted, and it stops when it scrolls out of view. There is no gate like the one used for rewards.

Autoplays when scrolled into view.

How it works

1. Get a bid: Use Prebid.js to get a video bid (VAST).
2. Create the player: Pass it to createOutstreamPlayer(), which creates an ad slot in the feed.
3. Viewable playback: When the ad slot is shown above a certain ratio (50% by default), it autoplays muted, and it pauses when it leaves the viewport.
4. On end: By default, the ad slot collapses (configurable via onEnd).

Quick start

Script tag

<div id="feed-slot"></div>
<script src="https://cdn.michao-ssp.com/player/v1/outstream.js"></script>
<script>
  window.michao.createOutstreamPlayer({
    target: "feed-slot",
    bid, // Prebid video bid
    viewableThreshold: 0.5, // visible ratio required to play
    onEnd: "collapse", // "collapse" | "replay" | "keep"
  });
</script>

URL ESM

import { createOutstreamPlayer } from "https://cdn.michao-ssp.com/player/v1/outstream.mjs";

const handle = createOutstreamPlayer({
  target: "feed-slot",
  bid,
  viewableThreshold: 0.5,
  onEnd: "collapse",
  callbacks: { onImpression, onComplete, onClick, onQuartile },
});

await handle.done; // "completed" | "failed" | "dismissed"

Key options

Option	Default	Description
target	—	Element ID or HTMLElement
bid	—	Prebid video bid
viewableThreshold	0.5	Visible ratio at which playback starts (0–1)
onEnd	"collapse"	Behavior on end. collapse / replay (play button) / keep (leave the final frame)
collapseOnFail	true	Collapse the ad slot on no-fill or failure
muted	true	Start muted (required for autoplay)
fullscreen	false	Show a fullscreen button
theme	"auto"	auto / ivory / noir, or a theme spec
callbacks	—	onImpression / onComplete / onClick / onFail / onQuartile

For details, see the API reference.

Behavior notes

• Muted autoplay: Following the browser autoplay policy, playback starts muted by default.
• Pause off-screen: When the slot leaves the viewport, it pauses and resumes when it returns. It also pauses when the tab is hidden.
• Collapse on end: By default, the ad slot collapses when playback ends or on no-fill, leaving no gap in the layout.