Javascript 在移动chrome和ios中使用google ima sdk不会自动播放视频广告
我试图为谷歌ima sdk播放器在chrome和safari上的移动设备中自动播放广告找到一个解决方案。我尝试了以下链接:- 所以我发现,如果您使用element.play()而不是使用autoplay属性来“自动播放”视频,那么ios上的mobile和chrome都会暂停视频,而不是给您一条权限被拒绝的消息。这将触发暂停事件。确保在手机上始终使用autoplay静音启动 在Android上,请注意广告播放时没有音频。代码中的某些内容是关闭音频,然后尝试再次播放 代码如下:-Javascript 在移动chrome和ios中使用google ima sdk不会自动播放视频广告,javascript,android,ios,google-chrome,safari,Javascript,Android,Ios,Google Chrome,Safari,我试图为谷歌ima sdk播放器在chrome和safari上的移动设备中自动播放广告找到一个解决方案。我尝试了以下链接:- 所以我发现,如果您使用element.play()而不是使用autoplay属性来“自动播放”视频,那么ios上的mobile和chrome都会暂停视频,而不是给您一条权限被拒绝的消息。这将触发暂停事件。确保在手机上始终使用autoplay静音启动 在Android上,请注意广告播放时没有音频。代码中的某些内容是关闭音频,然后尝试再次播放 代码如下:- IMAHT
IMAHTML5简单演示
#主容器{
位置:相对位置;
宽度:640px;
高度:360px;
}
#内容,#adContainer{
位置:绝对位置;
顶部:0px;
左:0px;
宽度:640px;
高度:360px;
}
#内容元素{
宽度:640px;
高度:360px;
溢出:隐藏;
}
#播放按钮{
边缘顶部:10px;
垂直对齐:顶部;
宽度:350px;
高度:60px;
填充:0;
字体大小:22px;
颜色:白色;
文本对齐:居中;
文本阴影:0 1px2pRGBA(0,0,0,0.25);
背景#2c3e50;
边界:0;
边框底部:2个实心#22303f;
光标:指针;
-网络工具包盒阴影:插图0-2px#22303f;
盒影:插图0-2px#22303f;
}
//版权所有2013谷歌公司。保留所有权利。
//您可以出于任何目的研究、修改和使用此示例。
//请注意,此示例按“原样”提供,不提供保修
//任何明示或暗示的。
风险资产管理人;
无功负载;
var附加显示容器;
无功间隔定时器;
var播放按钮;
视频内容;
函数init(){
videoContent=document.getElementById('contentElement');
//playButton=document.getElementById('playButton');
//playButton.addEventListener(“点击”,播放广告);
setUpIMA();
}
函数setUpIMA(){
//创建广告显示容器。
createAdDisplayContainer();
//创建广告加载器。
adsLoader=新的google.ima.adsLoader(adDisplayContainer);
//收听并响应加载的广告和错误事件。
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS\u MANAGER\u已加载,
OnadManager已加载,
假);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_错误,
奥纳德罗,
假);
//一个事件侦听器,告诉SDK我们的内容视频
//已完成,因此SDK可以播放任何后期滚动广告。
var contentEndedListener=function(){adsLoader.contentComplete();};
videoContent.onended=contentEndedListener;
//请求视频广告。
var adsRequest=new google.ima.adsRequest();
adsRequest.adTagUrl=https://pubads.g.doubleclick.net/gampad/ads?' +
'sz=640x480&iu=/124319096/外部/单样本&ciu\u sz=300x250&'+
'impl=s&gdfp\u req=1&env=vp&output=vast&unviewed\u position\u start=1&'+
'客户参数=部署%3devsite%26sample\u ct%3Dlinear&correlator=';
//指定线性和非线性插槽大小。这有助于SDK
//如果返回多个,请选择正确的创意。
adsRequest.lineardslotwidth=640;
adsRequest.LineardSlotheight=400;
adsRequest.nonlineardslotwidth=640;
adsRequest.nonlineardslotheight=150;
adsRequest.setAdWillAutoPlay(true);
adsLoader.requestAds(adsRequest);
}
函数createAdDisplayContainer(){
//我们假设adContainer是要容纳的元素的DOM id
//广告。
adDisplayContainer=新的google.ima.adDisplayContainer(
document.getElementById('adContainer'),videoContent);
}
函数playAds(){
//初始化容器。必须通过移动设备上的用户操作完成。
videoContent.load();
adDisplayContainer.initialize();
试一试{
//初始化广告管理器。此时将启动广告规则播放列表。
init(640360,google.ima.ViewMode.NORMAL);
//呼叫play开始显示广告。单个视频和叠加广告将
//此时开始;对于ad规则,该调用将被忽略。
adsManager.start();
}捕获(错误){
//如果大量响应出现问题,可能会抛出错误。
adsManager.setVolume(0);
videoContent.play();
}
}
已加载ADSManagerLoaded(adsManagerLoadedEvent)的函数{
//去找广告经理。
var adsRenderingSettings=new google.ima.adsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete=true;
//videoContent应设置为content video元素。
adsManager=adsManagerLoadedEvent.getAdsManager(
视频内容、ADSRendering设置);
//将侦听器添加到所需的事件。
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_错误,
奥纳德罗);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT\u暂停\u请求,
OnContentPauserRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT\u RESUME\u请求,
不满足要求的内容);
adsManager.addEventListener(
google.ima.AdEvent.Type.所有广告都已完成,
不发达国家);
//如有必要,收听任何其他事件。
adsManager.addEventListener(
google.ima.AdEvent.Type.LOADED,
不发达国家);
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
不发达国家);
adsManager.addEventListener(
google.ima.AdEvent.Type.COMPLETE,
不发达国家);
playAds();
}
函数ondevent(adEvent){
//从事件中检索广告。某些事件(例如,所有广告已完成)
//没有关联的广告对象。
var ad=adEvent.getAd();
开关(adEvent.type){
案例google.ima.AdEvent.Type.LOADED:
//这是为广告发送的第一个事件-可以
//确定广告是视频广告还是覆盖广告。
如果(!ad.isLinear()){
//正确放置叠加的AdDisplayContainer。