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

播放通过 Google Cloud Video Stitcher API 注册的 VOD 视频流

本指南将演示如何使用 IMA DAI SDK 通过 HTML5 请求和播放 Google Cloud VOD 视频流会话。

本指南是对使用入门指南。

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

设置 Google Cloud 项目

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

位置

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

项目编号

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

OAuth 令牌

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

OAUTH_TOKEN

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

广告资源网代码

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

VOD 配置 ID

VOD 视频流的 VOD 配置 ID：VOD_CONFIG_ID

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

配置开发环境

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

type：一个字符串，对于 HLS 串流必须设置为 'ID3'，对于 DASH 串流必须设置为 'urn:google:dai:2018'。
data：对于 DASH 事件消息，则为消息数据字符串。
timestamp：一个数字，即 DASH 的事件消息开始时间。

请尽快发送玩家事件提供的元数据，并尽可能经常发送。如果元数据缺失或不正确，IMA DAI SDK 可能不会触发广告事件，导致广告事件报告不当。

下载适用于 HTML5 并提取将 hls_js/simple 个示例 ZIP 文件复制到一个新文件夹中。这个示例是可以托管在本地，用于测试目的的应用。

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

python3 -m http.server 8000

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

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

如果一切正常，点击视频播放器上的 play 按钮即可开始播放短片“钢铁之泪”，每 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 配置，从而自定义您的串流请求。如果您提供了无法识别的选项， 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);

清理

现在您已成功托管了 VOD 视频流以及使用 IMA DAI SDK 进行请求对于 HTML5，请务必清理资源。

按照 VOD 清理移除任何不需要的资源和资产的指南。

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

Chromecast

iOS