IMA SDK 可让您轻松地将多媒体广告集成到您的网站和应用中。IMA SDK 可以 向任意 <ph type="x-smartling-placeholder"></ph> 符合 VAST 标准的广告服务器,并管理应用中的广告播放。借助 IMA DAI SDK,应用 针对广告和内容视频(VOD 或直播内容)的视频流请求。然后,SDK 会返回 组合视频流,因此您无需管理在广告与内容视频之间的切换 。
选择您感兴趣的 DAI 解决方案
播放通过 Google Cloud Video Stitcher API 注册的直播
本指南将演示如何使用 IMA DAI SDK 通过 HTML5 请求和播放 通过 Google Cloud 视频拼接器注册的事件的 API 以及如何 在播放过程中插入广告插播时间点。
本指南对使用入门 指南 。
有关与其他平台集成或使用 IMA 客户端 SDK,请参阅互动式媒体广告 SDK。
设置 Google Cloud 项目
设置 Google Cloud 项目并配置服务账号,以访问 项目。
为直播活动创建配置 使用您自己的内容直播或测试直播 数据流。 本指南需要使用 HLS 视频流。
输入以下变量,以便在 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
- 自定义素材资源键
- 在创建
直播活动配置
视频拼接器 API:
CUSTOM_ASSET_KEY
配置开发环境
IMA 示例应用仅展示 HLS 视频流请求。您仍然可以使用 DASH
流。VideoStitcherLiveStreamRequest
时间
设置兼容 DASH 的播放器,则需要为
视频播放器的进度事件 - 可将视频的元数据提供给
StreamManager.processMetadata()
。
此函数采用三个参数:
type
:一个字符串;对于 HLS 视频流,必须将其设置为'ID3'
;'urn:google:dai:2018'
(适用于 DASH 视频流)。data
:对于 DASH 事件消息,则为消息数据字符串。timestamp
:一个数字,即 DASH 的事件消息开始时间 。
根据您的播放器事件所提供的频率和频率,尽快发送元数据。如果 元数据缺失或不正确,则 IMA DAI SDK 可能无法触发广告事件, 导致广告事件报告不当。
下载适用于 HTML5 并提取 将 HLS.js Simple 示例复制到一个新文件夹中。这是一个 Web 应用,您可以 以进行测试
如需在本地托管示例,请转到新文件夹,然后运行以下命令 运行 python 命令:
python3 -m http.server 8000
http.server
仅适用于 Python 3.x。您可以使用任何其他网络服务器
例如 Apache HTTP Server 或 Node JS
打开网络浏览器并转到 localhost:8000
即可看到视频播放器。
您的浏览器必须支持 HLS.js
库。
如果一切正常,请点击视频上的播放按钮 播放器开始播放《Tears of Steel》。此内容为 使用视频点播 (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
。
重新加载页面。 然后,您可以请求并播放自定义直播。
(可选)添加直播会话选项
通过添加会话选项来覆盖默认设置,自定义你的直播请求
使用 Cloud Video Stitcher API 配置
VideoStitcherLiveStreamRequest.videoStitcherSessionOptions
。
如果您提供了无法识别的选项,
Video Stitcher API 将返回 HTTP 400 错误作为响应。请查阅
问题排查指南
以获取帮助。
例如,您可以替换 清单选项 该代码段可请求两个流式传输清单, 将视频流从低到高排序
...
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
结束本地服务器。