直接在电脑上打开文件
IMA 指南要求通过网络服务器提供页面,即使是本地服务器也一样。直接打开 HTML 文件可能会导致测试失败。
1 分钟看懂
您去电影院时,电影开始前是不是会先放几段预告片和广告?前贴片视频就是这样,只不过放在您的网站上。访客点击播放想看视频,在内容出现之前,同一个播放器里会先播放一段广告。播放器就是播放视频的那个框,带有播放、暂停和音量按钮。广告结束后,所选的视频才开始。
要做到这一点,播放器必须知道如何请求广告。Google 提供了一套叫做 IMA SDK 的代码包,您把它和播放器放在一起使用。它会使用广告标记向 Ad Manager 发出请求。广告标记是一个网址,带有广告位的信息,比如广告单元和播放器尺寸。返回的结果采用 VAST 格式,这是一种标准格式,就像一份说明书,告诉播放器播放哪个视频以及如何统计观看次数。如果网站使用了视频广告规则,返回的结果可能是 VMAP,就像电视节目表,说明每个广告时段在什么时候插入。
Google 还特别说明了视频自动开始播放(即自动播放)的问题。Chrome 和 Safari 等浏览器有各自的规则,视频往往只有在静音时才能自动开始。没有简单的方法可以提前知道浏览器是否允许,唯一的办法就是尝试播放。因此,IMA 指南提到,在手机上,广告容器应由访客的操作来触发,比如点击播放按钮。而且如果播放器将自动播放或静音播放,就应该在请求中说明,这样返回的就只会是能以这种方式播放的广告。
当视频就是访问的原因时,前贴片广告就很值得,例如一堂课、一道食谱或一条视频新闻。在 Google 的视频政策中,这个广告位叫插播,意思是处在用户选择观看的内容之中,必须正确声明。请始终记住:用户是为视频而来的,所以广告不能干扰控件,也不能卡住内容。
分步说明
实施示例
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
<video id="conteudo" width="640" height="360" playsinline controls>
<source src="meu-video.mp4" type="video/mp4">
</video>
<div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>
<script>
var video = document.getElementById('conteudo');
var adDisplayContainer = new google.ima.AdDisplayContainer(
document.getElementById('adContainer'), video);
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
var adsManager;
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
function (e) {
adsManager = e.getAdsManager(video);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
function () { video.pause(); });
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
function () { video.play(); });
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
});
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
function onAdError(e) {
console.log(e.getError());
if (adsManager) { adsManager.destroy(); }
video.play(); // sem anúncio, o vídeo continua
}
// 3. Pedido do anúncio (IDs de exemplo)
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
'&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
'&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
adsRequest.linearAdSlotWidth = 640;
adsRequest.linearAdSlotHeight = 400;
adsLoader.requestAds(adsRequest);
// 4. Só começa quando a pessoa clica em Assistir
document.getElementById('playButton').addEventListener('click', function () {
adDisplayContainer.initialize();
try {
adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
adsManager.start();
} catch (err) {
video.play();
}
});
</script>Google 的建议
提示
注意
IMA 指南要求通过网络服务器提供页面,即使是本地服务器也一样。直接打开 HTML 文件可能会导致测试失败。
在手机上,广告容器必须由访客的操作来初始化,比如点击播放。否则广告可能无法播放。
有问题的 VAST 响应可能会导致错误。Google 的示例会销毁广告管理器并播放视频,这样访客就不会卡在静止的画面上。
窗口大小改变时,Google 的示例会用视频的尺寸调用 AdsManager 的调整大小方法。否则,广告的尺寸可能不对。
不需要。播放器可以通过 IMA 请求 VAST 标记。Google 表示,广告规则参数(ad_rule)对投放广告不是必需的,只有使用视频广告规则时才需要。
VAST 是告诉播放器播放哪条广告的响应。VMAP 是配合广告规则使用的响应,说明各个广告时段何时插入。标记通过 output 参数选择格式,取值如 vast 和 vmap。
可以,前提是浏览器允许。Chrome 和 Safari 会限制自动播放,尤其是带声音的。播放器应先测试,并在请求中说明是否会自动播放和静音播放,在手机上则要由访客的操作来启动广告。
Google 的指南要求在广告未能加载时视频继续播放。在示例中,广告管理器会被销毁,视频不带广告继续播放。
资料库
本页内容均以 Google 官方文档为准。可直接阅读原文:
审核会像访问者一样读取网站,不点击任何内容,并告诉你需要修正什么。