播放使用 Google Cloud Video Stitcher API 注册的 VOD 串流
本指南演示了如何使用适用于 HTML5 的 IMA DAI SDK 请求和播放 Google Cloud VOD 流式传输会话。
本指南对 IMA DAI 入门指南中的基本示例进行了扩展。
如需了解如何与其他平台集成或如何使用 IMA 客户端 SDK,请参阅互动式媒体广告 SDK。
如需查看或按照完成的示例集成操作,请下载适用于 HLS 或 DASH 的 Cloud 视频拼接器示例。
设置 Google Cloud 项目
输入以下变量以在 IMA SDK 中使用:
- 位置
- 创建 VOD 配置的 Google Cloud 区域:
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 的 IMA DAI 示例,并将 hls_js/simple
示例 zip 文件解压缩到一个新文件夹中。此示例是一个 Web 应用,您可以将其托管在本地以进行测试。
如需在本地托管该示例,请前往新文件夹,然后运行以下 Python 命令以启动网络服务器:
python3 -m http.server 8000
http.server
仅适用于 Python 3.x。您可以使用任何其他网络服务器,例如 Apache HTTP Server 或 Node JS。
打开网络浏览器,然后前往 localhost:8000
查看视频播放器。您的浏览器必须支持 HLS.js 库。
如果一切正常,点击视频播放器上的 play 按钮即可开始播放短片“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 串流。
(可选)添加在线播放会话选项
使用 VideoStitcherVodStreamRequest.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 托管 VOD 流式传输,并使用适用于 HTML5 的 IMA DAI SDK 请求了该流式传输,因此请务必清理所有广告投放资源。
请按照视频点播清理指南移除所有不需要的资源和资产。
最后,在启动 Python 3 Web 服务器的终端窗口中,使用 ctrl+C
命令结束本地服务器。