English
也称为Draw视频信息流广告
沉浸视频流广告为媒体提供了竖屏视频信息流广告样式,适合在全屏的竖屏视频中使用。支持app-nvue页面使用。
类抖音的竖版视频流,来电秀、直播间等全屏观看的视频。
平台差异说明
App-nvue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序、飞书小程序 | QQ小程序 | 快应用 | 360小程序 | 快手小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|---|---|
√(3.0.0+) | x | x | x | x | x | x | x | x | x | x |
开通配置广告
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异 |
---|---|---|---|---|
data | Object | 可选 | 广告数据,通过 plus.ad.getDrawAds (参考示例代码),设置后adpid将无效 | App |
adpid | String | uni-ad App广告位id,在uni-ad官网申请广告位 | App | |
@load | EventHandle | 广告加载成功的回调 | ||
@error | EventHandle | 广告加载失败的回调,event.detail = {errCode: } |
注意
@error 错误码
示例:
示例1
<template>
<!-- 仅nvue页面支持 -->
<!-- 必须指定ad-draw的宽度和高度,否则大小全屏 -->
<view class="container">
<ad-draw class="ad-draw" adpid="1507000690"></ad-draw>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container {
flex: 1;
}
.ad-draw {
flex: 1;
width: 750rpx;
}
</style>
示例2
<template>
<!-- 仅nvue页面支持 -->
<view class="content">
<view class="ad-draw">
<ad-draw :data="adData" @load="onload" @error="onerror"></ad-draw>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'ad-draw',
adData: {}
}
},
onReady: function (e) {
this.getAdData()
},
methods: {
getAdData: function (e) {
// 仅APP平台支持
plus.ad.getDrawAds({
adpid: '1507000690', // 此广告位标识仅在HBuilderX标准基座中有效,仅用于测试
count: 1, // 广告数量,默认 1-3
width: 300, // 根据宽度获取合适的广告(单位px)
height: 300 // 根据高度获取合适的广告(单位px)
},
(res) => {
this.adData = res.ads[0];
console.log(this.adData);
},
(err) => {
console.log(err);
}
)
},
onload(e) {
console.log("onload",e);
},
onerror(e) {
console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
}
}
}
</script>
沉浸视频流广告不是激励视频广告,激励视频广告另见:https://uniapp.dcloud.io/uni-ad/ad-rewarded-video
注意
错误码