アウトストリーム広告を導入する

アウトストリーム広告は、記事やフィードの中に差し込むインフィード動画です。広告枠が表示領域に入るとミュートで自動再生し、スクロールで外れると停止します。リワードのようなゲートはありません。

表示領域に入ると自動再生します。

仕組み

1. 入札の取得: Prebid.js で video の入札（VAST）を取得します。
2. プレイヤーの生成: createOutstreamPlayer() に渡すと、フィード内に広告枠が作られます。
3. ビューアブル再生: 広告枠が一定割合（既定 50%）表示されるとミュートで自動再生、外れると一時停止します。
4. 終了時: 既定では広告枠を畳みます（onEnd で変更可能）。

クイックスタート

スクリプトタグ

<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 入札
    viewableThreshold: 0.5, // 再生に必要な表示割合
    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"

主なオプション

オプション	既定	説明
target	—	要素 ID か HTMLElement
bid	—	Prebid の video 入札
viewableThreshold	0.5	再生を開始する表示割合（0〜1）
onEnd	"collapse"	終了時の挙動。collapse（畳む）/ replay（再生ボタン）/ keep（最終フレームを残す）
collapseOnFail	true	在庫切れ・失敗時に広告枠を畳む
muted	true	ミュートで開始（自動再生に必須）
fullscreen	false	フルスクリーンボタンを表示
theme	"auto"	auto / ivory / noir、またはテーマ指定
callbacks	—	onImpression / onComplete / onClick / onFail / onQuartile

詳細は API リファレンス を参照してください。

動作のポイント

• ミュート自動再生: ブラウザの自動再生ポリシーに従い、既定はミュートで開始します。
• オフスクリーンで停止: 表示領域から外れると一時停止し、戻ると再開します。タブが非表示になった場合も停止します。
• 終了時に畳む: 既定では再生終了・在庫切れ時に広告枠を畳み、レイアウトの隙間を残しません。