设置 IMA SDK for DAI

请选择平台： HTML5 Android iOS tvOS Cast Roku

借助 IMA SDK，您可以轻松地将多媒体广告集成到网站和应用中。IMA SDK 可以从任何 符合 VAST 标准的广告服务器请求广告，并在您的应用中管理广告播放。借助 IMA DAI SDK，应用可以针对广告和内容视频（视频点播或直播内容）发出视频流请求。然后，SDK 会返回一个组合视频流，这样您就不必在应用中管理广告和内容视频之间的切换。

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

全服务 Pod 服务 Cloud Stitching API 直播 Cloud Stitching API VOD

播放已向 Google Cloud Video Stitcher API 注册的 VOD 流

本指南演示了如何使用 IMA DAI SDK for HTML5 请求和播放 Google Cloud VOD 流会话。

本指南扩展了 IMA DAI 入门指南中的基本示例。

如需了解如何与其他平台集成或使用 IMA 客户端 SDK，请参阅互动式媒体广告 SDK。

如需查看或遵循已完成的集成示例，请下载适用于 HLS 或 DASH 的 Cloud 视频拼接器示例。

注意： 适用于 HTML5 的 IMA DAI SDK 同时支持 HLS 和 DASH 视频流，但播放每种视频流都需要不同的媒体播放器或扩展程序，例如 HLS.js 或 DASH.js，并且实现方式各不相同。

本指南介绍了如何配置 HLS.js 和 IMA DAI SDK 以播放 HLS 流，并提供了有关 DASH 实现差异的重要注意事项。

如需了解如何使用 IMA 实现 DASH DAI 流，请参阅 IMA DASH.js 示例应用。

设置 Google Cloud 项目

设置 Google Cloud 项目并配置服务账号以访问该项目。

输入以下变量以在 IMA SDK 中使用：

位置

创建 VOD 配置的 Google Cloud 区域： LOCATION

项目编号

使用 Video Stitcher API 的 Google Cloud 项目编号：PROJECT_NUMBER

OAuth 令牌

具有 Video Stitcher 用户角色的服务账号的短期有效的 OAuth 令牌：

OAUTH_TOKEN

详细了解如何创建短期有效的 OAuth 令牌。 只要 OAuth 令牌未过期，就可以在多个请求中重复使用。

广告联盟代码

用于请求广告的 Ad Manager 广告资源网代码： NETWORK_CODE

VOD 配置 ID

视频点播视频流的视频点播配置 ID： VOD_CONFIG_ID

如需详细了解如何创建 VOD 配置 ID，请参阅 Cloud Stitching 创建 VOD 配置指南。

配置开发环境

要点： IMA DAI VideoStitcherVodStreamRequest 类同时支持 HLS 流和多周期 DASH 流。广告插播时间点仅插入在 DASH 时段之间。

IMA 示例应用仅演示 HLS 视频流请求。在构建 VideoStitcherVodStreamRequest 类时，您仍然可以使用 DASH 流。设置与 DASH 兼容的播放器时，您需要为视频播放器的进度事件设置一个监听器，该监听器可向 StreamManager.processMetadata() 提供视频的元数据。此函数采用三个参数：

1. type：一个字符串，对于 HLS 流，必须设置为 'ID3'；对于 DASH 流，必须设置为 'urn:google:dai:2018'。

2. data：对于 DASH 事件消息，这是消息数据字符串。

3. timestamp：一个数字，表示 DASH 流的事件消息开始时间。

尽快且尽可能频繁地发送元数据，具体取决于玩家事件的提供频率。如果元数据缺失或不正确，IMA DAI SDK 可能不会触发广告事件，从而导致广告事件报告不正确。

下载 IMA DAI HTML5 示例，并将 hls_js/simple 示例 zip 文件解压缩到新文件夹中。此示例是一个 Web 应用，您可以在本地托管该应用以进行测试。

如需在本地托管示例，请前往新文件夹，然后运行以下 Python 命令以启动 Web 服务器：

python3 -m http.server 8000

http.server 仅适用于 Python 3.x。您可以使用任何其他 Web 服务器，例如 Apache HTTP Server 或 Node JS。

打开网络浏览器，然后前往 localhost:8000 以查看视频播放器。 您的浏览器必须支持 HLS.js 库。

如果一切正常，点击视频播放器上的播放按钮后，短片《钢之泪》会开始播放，每隔 30 秒会插播一次广告。

请求 VOD 视频流

如需将示例流替换为拼接了广告的 VOD 流，请使用 VideoStitcherVodStreamRequest 类自动创建与 Google Ad Manager 的广告会话。您可以使用 Google Ad Manager 界面查找生成的 DAI 会话，以便进行监控和调试。

在现有示例中，有用于请求 VOD 流或直播的函数。为了使其与 Google Cloud Video Stitcher API 搭配使用，您需要添加一个新函数来返回 VideoStitcherVodStreamRequest 对象。

示例如下：

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  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);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we 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);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

重新加载页面。 然后，您可以请求并播放自定义 VOD 流。

（可选）添加直播会话选项

通过添加会话选项来自定义您的流请求，以使用 VideoStitcherVodStreamRequest.videoStitcherSessionOptions 替换默认的 Cloud Video Stitcher API 配置。 如果您提供的选项无法识别，Cloud Video Stitcher API 将以 HTTP 400 错误作为响应。如需帮助，请参阅问题排查指南。

例如，您可以使用以下代码段替换清单选项，该代码段会请求两个流清单，其中视频片段按从最低比特率到最高比特率的顺序排列。

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

清理

现在，您已使用 Google Cloud Video Stitcher API 成功托管了 VOD 视频流，并使用 IMA DAI SDK for HTML5 请求了该视频流，接下来需要清理所有投放资源。

请按照 VOD 清理指南移除所有不需要的资源和素材资源。

最后，在启动 Python 3 Web 服务器的终端窗口中，使用命令 ctrl+C 结束本地服务器。