如需为您的项目启用 Video Stitcher API，请联系您的客户代表或销售团队了解详情。

此页面由 Cloud Translation API 翻译。

将 IMA DAI SDK 与 HTML5 客户端搭配使用

播放使用 Google Cloud Video Stitcher API 注册的直播

本指南将演示如何使用 IMA DAI SDK 通过 HTML5 请求和播放通过 Google Cloud 视频拼接器注册的事件的 API 以及如何在播放过程中插入广告插播时间点。

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

有关与其他平台集成或使用 IMA 客户端 SDK，请参阅互动式媒体广告 SDK。

设置 Google Cloud 项目

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

位置

Google Cloud 区域创建实时配置的位置： LOCATION

项目编号

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

OAuth 令牌

具有视频拼接工具用户角色的服务账号的短期有效 OAuth 令牌：

OAUTH_TOKEN

详细了解如何为服务账号创建短期有效的凭据。该 OAuth 令牌可以跨多个请求重复使用，只要它尚未已过期。

广告资源网代码

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

实时配置 ID: 您在创建直播活动时指定的直播配置 ID： LIVE_CONFIG_ID
自定义素材资源键: 使用 Video Stitcher API 为直播活动创建配置过程中生成的 Ad Manager 自定义素材资源键：CUSTOM_ASSET_KEY

配置开发环境

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

type：一个字符串；对于 HLS 视频流，必须将其设置为 'ID3'； 'urn:google:dai:2018'（适用于 DASH 视频流）。
data：对于 DASH 事件消息，这是消息数据字符串。
timestamp：一个数字，即 DASH 的事件消息开始时间。

根据您的播放器事件所提供的频率和频率，尽快发送元数据。如果元数据缺失或不正确，IMA DAI SDK 可能不会触发广告事件，导致广告事件报告不当。

下载适用于 HTML5 的 IMA DAI 示例，并将 HLS.js 简单示例解压缩到一个新文件夹中。这是一个 Web 应用，您可以以进行测试

如需在本地托管示例，请转到新文件夹，然后运行以下命令运行 python 命令：

python3 -m http.server 8000

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

打开网络浏览器并转到 localhost:8000 即可看到视频播放器。您的浏览器必须支持 HLS.js 库。

如果一切正常，点击视频播放器上的播放按钮后，系统会先播放一段短广告，然后播放短片“钢铁之泪”。此类内容是使用视频点播 (VOD) 串流传送的。

申请直播

如需将示例 VOD 视频流替换为您的直播内容，请使用 VideoStitcherLiveStreamRequest 类，该类会自动创建与 Google Ad Manager 的广告会话。您可以使用 Google Ad Manager 界面找到生成的 DAI 会话，以进行监控和调试。

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

示例如下：

// StreamManager which will be used to request ad-enabled 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() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

对于本地测试（如果实时流式传输的文件位于 Cloud Storage 或 Cloud Storage 存储分区中）则您需要启用适用于源的 CORS http://localhost:8000。

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

（可选）添加在线播放会话选项

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

例如，您可以替换清单选项该代码段可请求两个流式传输清单，将视频流从低到高排序

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

插入广告插播时间点

Google Cloud Video Stitcher API 针对每个广告插入从广告代码中检索到的广告。清单中使用广告标记表示广告插播时间点。广告标记由直播编码器插入。

如果您使用的是自己的直播视频流，则需要插入广告标记。如需详细了解支持的 HLS 和 DASH 广告标记，请参阅广告标记文档。
如果您使用 Google Cloud Livestream API 创建了直播，插入广告插播时间点频道事件。

插入广告插播时间点之后，广告会立即播放。

清理

现在您已成功主持了直播活动以及使用 IMA DAI SDK 进行请求对于 HTML5，请务必清理资源。

请按照直播清理指南移除所有不需要的资源和资产。

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

Chromecast

iOS