CSAI 经理

简单分类来进行和管理内容回放与应用在上方的广告体验之间的关系 - 客户端.

安装

npm install @eyevinn/csai-manager

基本用途

const videoElement = document.querySelector("video");
new CSAIManager({
  contentVideoElement: videoElement,
  adBreakVASTList: [
    {
      timeOffset: 0,
      vastUrl:
        "https://eyevinn.adtest.eyevinn.technology/api/v1/vast?dur=30",
    },
  ],
});

videoElement.addEventListener("ended", () => {
  csaiManager.destroy();
});

狦 别 发送一个已经创建的 ad video 元素( 通过下面列出的可用选项), 但是让库创建该元素, 您需要设置容器到 position: relative; 由于CSAI经理会尝试将新元素绝对边缘定位到容器边缘.

可用选项

export interface ICSAIManagerOptions {
  debug?: boolean;

  contentVideoElement: HTMLVideoElement;
  autoManagePlayback?: boolean; // default true; whether you want the manager to pause/play the content, or if you want to act on the events
  isLive?: boolean; // default false; will adjust the validation to not require vast or vmap url etc
  autoplay?: boolean; // default false

  // Whether you have created a video element for the ads on beforehand, or would want to render it in a div. As fallback it finds the parent of the contentVideoElement
  container?: HTMLElement;
  adVideoElement?: HTMLVideoElement;

  // For fetching ads - either provide a vmap url, or a list of time offsets and vast url's
  vmapUrl?: string;
  adBreakVASTList?: IAdBreakVASTItem[];
}

export interface IAdBreakVASTItem {
  timeOffset: number;
  vastUrl: string;
}

活动

你可以听广告管理者曝光的事件 比如自己处理你内容的暂停和播放.

const videoElement = document.querySelector("video");
const csaiManager = new CSAIManager({
  contentVideoElement: videoElement,
  adBreakVASTList: [
    {
      timeOffset: 0,
      vastUrl:
        "https://eyevinn.adtest.eyevinn.technology/api/v1/vast?dur=30",
    },
  ],
});

csaiManager.on("*", (event, data) => {

  console.log("DEBUG EVENT", event, data);

  if (event === "breakStart") {
    videoElement.pause();
  }
  if (event === "breakEnd") {
    videoElement.play();
  }
});

被曝光的事件与VAST跟踪匹配——即IAB事件

export enum AdTrackingEvent {
  START = "start",
  IMPRESSION = "impression",
  EXPAND = "expand",
  MUTE = "mute",
  UNMUTE = "unmute",
  PAUSE = "pause",
  RESUME = "resume",
  REWIND = "rewind",
  CLOSE = "close",
  COMPLETE = "complete",

  FIRST_QUARTILE = "firstQuartile",
  MIDPOINT = "midpoint",
  THIRD_QUARTILE = "thirdQuartile",

  CLICK_THROUGH = "clickThrough",

  ERROR = "error",
}

export enum AdBreakTrackingEvent {
  BREAK_START = "breakStart",
  BREAK_END = "breakEnd",
}

方法

• play() 当自动播放未设定为真实时触发播放

这些方法专门用于现场直播 (记得设置选项) autoManagePlayback 改为 false 不暂停活流)

• fetchAdBreak(vastUrl: string): Promise<void>
• triggerAdBreak(): Promise<void>