ZJSDK

视频内容

视频内容

视频内容分为新界面展示和插入到当前页面两种类型，回调相同：

  • 新界面展示是拉起一个新的AndroidActivity，接入相对简单，效率更高

  • 插入到当前页面需要指定View的宽、高、上边距、左边距，默认填满当前屏幕

新界面展示

contentAd() {
    this.zjJSBridge.contentAd({
        // 广告位ID，必填
        posId: "J4961952628",
        // 用户ID，选填
        userId: "13000000000"
    }, function(succ, data) {
        console.log("succ = " + succ + " & data = " + data)
    })
},

插入到当前页面

注意

使用插入到当前页面时，需要确保WebView为contentView或父容器为FrameLayout，否则无法定位

使用插入到当前页面展示，需要处理退出页面事件，移除当前视图，详见Demo工程的演示页面

传入的尺寸，需要为屏幕的真实像素值，使用UNI时需要计算devicePixelRatio，详见Demo

<template>
    <view class="page-container">
        <button class="btn-view" @click="contentAd">新页面加载</button>
        <button class="btn-view" @click="contentView">当前界面加载</button>
        <button class="btn-view" @click="hideContentView">隐藏</button>
        <button class="btn-view" @click="removeContentView">移除</button>
        <view class="ad-container" :style="{height:containerHeight+'px'}"></view>
    </view>
</template>
<script>
    var isShowing = false
    export default {
        data() {
            return {
                containerTop: 0,
                containerLeft: 0,
                containerWidth: 0,
                containerHeight: 0,
                devicePixelRatio: 0,
            }
        },
        onBackPress(event) {
            this.onBackPressed()
        },
        onUnload() {
            if (isShowing) {
                this.onBackPressed()
            }
            this.zjJSBridge.removeListener()
        },
        methods: {
            onBackPressed() {
                if (isShowing) {
                    this.removeContentView()
                }
                return true
            },
            toNativePx(px) {
                return parseInt(this.devicePixelRatio * px)
            },
            contentView() {
                this.zjJSBridge.contentView({
                    // 广告位ID，必填
                    posId: "J4961952628",
                    // 用户ID，选填
                    userId: "13000000000",
                    // 宽的真实PX尺寸
                    width: this.toNativePx(this.containerWidth),
                    // 高的真实PX尺寸
                    height: this.toNativePx(this.containerHeight),
                    // 上边距（需要计算windowTop的高度）
                    top: this.toNativePx(this.containerTop),
                    // 左边距
                    left: this.toNativePx(this.containerLeft)
                }, function(succ, data) {
                    console.log("succ = " + succ + " & data = " + data)
                    if (succ) {
                        isShowing = true
                    }
                })
            },
            hideContentView() {
                this.zjJSBridge.contentView({
                    // 广告位ID，必填
                    posId: "J4961952628",
                    // 用户ID，选填
                    userId: "13000000000",
                    // 当hide为true时，暂时隐藏视频内容界面，再次调用contentView方法会恢复显示
                    hide: true
                }, function(succ, data) {
                    console.log("succ = " + succ + " & data = " + data)
                })
            },
            removeContentView() {
                isShowing = false
                this.zjJSBridge.contentView({
                    // 广告位ID，必填
                    posId: "J4961952628",
                    // 用户ID，选填
                    userId: "13000000000",
                    // 当remove为true时，移除视频内容界面，再次调用contentView方法会重新加载
                    remove: true
                }, function(succ, data) {
                    console.log("succ = " + succ + " & data = " + data)
                })
            }
        }
    }
</script>

事件回调

注意

请确保已经在当前页面已参照文档配置监听器正确配置了监听器

this.zjJSBridge.ready(() => {
    this.zjJSBridge.setListener((event, data) => {
        if (event != this.zjJSBridge.events.contentAd && event != his.zjJSBridge.events.contentView) {
            return
        }
        switch (data.action) {
            case this.zjJSBridge.actions.onZjAdError:
                uni.showModal({
                    showCancel: false,
                    title: '视频内容加载失败',
                    content: "错误码:" + data.code + "\n错误信息:" + data.msg
                })
                break;
            case this.zjJSBridge.actions.onZjAdLoaded:
                console.log('视频内容加载成功');
                break;
            case this.zjJSBridge.actions.onPageEnter:
                // 可通过页面的enter和leave事件计算用户观看的条目数
                console.log('视频内容进入当前页面')
                break;
            case this.zjJSBridge.actions.onPageLeave:
                // 可通过页面的resume和pause事件累加用户的观看时长
                console.log('视频内容离开当前页面')
                break;
        }
    })
})
目录