开始使用 IMA DAI SDK

借助 IMA SDK，您可以轻松将多媒体广告集成到您的网站和应用中。IMA SDK 可以 向任意 <ph type="x-smartling-placeholder"></ph> 符合 VAST 标准的广告服务器，并管理应用中的广告播放。借助 IMA DAI SDK，应用可以针对广告和内容视频（VOD 或直播内容）发出流式传输请求。然后，SDK 会返回 组合视频流，因此您无需管理在广告与内容视频之间的切换 。

选择您感兴趣的 DAI 解决方案

全方位服务 DAI

本指南将演示如何将 IMA DAI SDK 集成到简单的视频中 播放器应用。如果您想查看或了解已完成的示例 集成，请下载 简单示例。

IMA DAI 概览

实施 IMA DAI SDK 涉及两个主要组件，如 本指南：

  • StreamRequest - VODStreamRequest 或 LiveStreamRequest： 用于定义数据流请求的对象。流式传输请求可以是视频点播或直播。请求会指定内容 ID 以及 API 密钥或身份验证令牌和其他 参数。
  • StreamManager：一种对象，用于处理动态广告插播数据流以及与 DAI 后端的互动。直播管理器还会处理跟踪 ping，并将直播和广告事件转发给发布商。

前提条件

  • 三个空文件
    • dai.html
    • dai.css
    • dai.js
  • 您的电脑或网络服务器上安装 Python，以用于测试

启动开发服务器

由于 IMA DAI SDK 加载依赖项所用的协议与其加载时所在网页使用的协议相同，因此您需要使用网络服务器来测试应用。要启动本地开发服务器，最快的方法是使用 Python 的内置服务器。

  1. 使用命令行，从包含 index.html 文件的目录中 运行：

    python -m http.server 8000

  2. 在网络浏览器中，前往 http://localhost:8000/

    您也可以使用其他任何 Web 服务器，例如 Apache HTTP 服务器。

创建一个简单的视频播放器

首先，修改 dai.html，以创建一个简单的 HTML5 视频元素和一个用于点击的 div。此外，还要添加必要的代码以加载 dai.css 和 dai.js 文件，以及导入 hls.js 视频播放器。然后， 修改 dai.css 以指定页面元素的大小和位置。 最后，在 dai.js 中定义用于保存视频流请求的变量 信息，以及要在网页加载时运行的 initPlayer() 函数。

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

加载 IMA DAI SDK

接下来，使用脚本代码在 dai.html 中的代码前面添加 IMA 框架 对于 dai.js。

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

初始化 StreamManager 并发出流式请求

为了请求一组广告，请创建一个 ima.dai.api.StreamManager， 负责请求和管理 DAI 视频流。构造函数接受视频元素，生成的实例接受广告界面元素来处理广告点击。

然后，定义请求数据流的函数。此示例包含适用于视频点播和直播的函数，它们分别创建 VODStreamRequest 和 LiveStreamRequest 实例，然后使用 streamRequest 参数调用 streamManager.requestStream()。对于直播，你还需要添加 处理程序会监听定时元数据事件，并将事件转发到 StreamManager。您可以根据自己的用例注释或取消注释代码。这两种方法都接受可选的 API 密钥。如果您使用的是受保护的视频流， 需要 创建 DAI 身份验证密钥。

此示例中的流均不受保护，因此未使用 apiKey。

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

处理数据流事件

最后，您需要为主要视频事件实现事件监听器。这个 处理 LOADED、ERROR、AD_BREAK_STARTED 和 通过调用 onStreamEvent() 函数来触发 AD_BREAK_ENDED 事件。此函数 处理音频流加载和错误，以及停用播放器控件 。流式传输 则视频播放器会使用 loadUrl() 加载并播放提供的网址 函数。

您可能还需要为视频元素的 pause 和 start 事件设置事件监听器，以便在 IMA 在广告插播期间暂停时允许用户继续播放。

要与 DAI 搭配使用，您的自定义播放器必须为直播传递 ID3 事件 添加到 IMA DAI SDK，如示例代码中所示。

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

大功告成！现在，您使用 IMA DAI SDK 请求并展示广告。如需了解更高级的 SDK 功能，请参阅其他指南或 GitHub 上的示例。