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