借助 IMA SDK,您可以轻松地将多媒体广告集成到您的网站和应用中。IMA SDK 可以向任何 符合 VAST 规范的广告服务器请求广告,并管理应用中的广告播放。借助 IMA DAI SDK,应用可以针对广告和内容视频(视频点播或直播内容)发出视频流请求。然后,SDK 会返回一个合并的视频流,这样您就不必在应用内管理广告视频和内容视频之间的切换。
选择您首选的 DAI 解决方案:
- 使用全方位服务 DAI 进行设置:Google Ad Manager 会选择广告并将其直接拼接到您的内容流中。
- 设置广告连播投放 DAI:Google Ad Manager 提供可供拼接或加载到视频播放器的广告连播。
播放通过 Google Cloud Video Stitcher API 注册的直播
本指南演示了如何使用 IMA DAI SDK for HTML5 请求和播放通过 Google Cloud Video Stitcher API 注册的活动的直播,以及如何在播放期间插入广告插播时间点。
本指南对 IMA DAI 入门指南中的基本示例进行了扩展。
如需了解如何与其他平台集成或如何使用 IMA 客户端 SDK,请参阅互动式媒体广告 SDK。
如需查看或遵循已完成的集成示例,请下载 HLS 或 DASH 的 Cloud Video Stitcher 示例。
设置 Google Cloud 项目
设置 Google Cloud 项目并配置服务账号以访问该项目。
使用您自己的直播内容或测试直播为直播活动创建配置。本指南假定您使用的是 HLS 在线播放。
输入以下变量,以便在 IMA SDK 中使用:- 位置
- 创建直播配置的 Google Cloud 区域:
LOCATION - 项目编号
- 使用 Video Stitcher API 的 Google Cloud 项目编号:
PROJECT_NUMBER - OAuth 令牌
具有 Video Stitcher User 角色的服务账号的短期有效 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';对于 DASH 直播,必须设置为'urn:google:dai:2018'。data:对于 DASH 事件消息,这是消息数据字符串。timestamp:一个数字,表示 DASH 流的事件消息开始时间。
请在播放器事件可以提供元数据时,尽快且尽可能频繁地发送元数据。如果元数据缺失或不正确,IMA DAI SDK 可能不会触发广告事件,从而导致广告事件报告不正确。
下载 IMA DAI 示例(适用于 HTML5),并将 HLS.js 简单示例解压缩到一个新文件夹中。此示例是一个 Web 应用,您可以在本地托管该应用以进行测试。
如需在本地托管示例,请前往新文件夹,然后运行以下 Python 命令来启动 Web 服务器:
python3 -m http.server 8000http.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 存储桶中,则您需要为源 http://localhost:8000 启用 CORS。
重新加载页面。 然后,您就可以请求和播放自定义直播。
(可选)添加流式传输会话选项
通过添加会话选项来自定义直播请求,以使用 VideoStitcherLiveStreamRequest.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 会为每个广告插播时间点插入从广告代码中检索到的广告。广告插播时间点在清单中使用广告标记表示。广告标记由直播编码器插入。
如果您使用的是自己的直播,则需要插入广告标记。如需详细了解支持的 HLS 和 DASH 广告标记,请参阅广告标记文档。
如果您使用 Google Cloud Livestream API 创建了直播,请插入广告插播时间点频道事件。
广告会在广告插播时间点插入后立即播放。
清理
现在,您已成功使用 Google Cloud Video Stitcher API 托管直播,并使用 IMA DAI SDK for HTML5 请求了该直播,接下来务必清理所有服务资源。
按照直播清理指南移除所有不需要的资源和资产。
最后,在启动 Python 3 Web 服务器的终端窗口中,使用 ctrl+C 命令结束本地服务器。