此页面由 Cloud Translation API 翻译。

开始使用 IMA DAI SDK

IMA SDK 可让您轻松地将多媒体广告集成到您的网站和应用中。IMA SDK 可以向任意符合 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 内置的服务器。

使用命令行，从包含 index.html 文件的目录中运行：
```
python -m http.server 8000
```
注意： http.server 仅适用于 Python 3.x。
在网络浏览器中，转到 http://localhost:8000/

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

创建简单的视频播放器

首先，修改 dai.html 以创建一个简单的 HTML5 视频元素和一个用于点击。此外，还要添加必要的代码以加载 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 视频流。构造函数采用 video 元素，并且生成的实例会采用广告界面元素来处理广告点击次数。

然后，定义请求流的函数。此示例包含既是 VOD 又是直播，这创建 VODStreamRequest 和 LiveStreamRequest，然后调用 streamManager.requestStream()。并采用 streamRequest 参数。对于直播，你还需要添加处理程序会监听定时元数据事件，并将事件转发到 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 上的示例。