前贴广告播放管理器

点击查看 ESADFrontPlayerManager API

第1步：package.json引入库

点击查看源码

"@extscreen/es-component": "3.0.1",
"@extscreen/es-player": "x.x.x",
"@extscreen/es-ad-player": "x.x.x",
"@extscreen/es-ad-front-player-manager": "x.x.x",

第2步：main-native.js中注册组件

点击查看源码

import "@extscreen/es-ad-player-view/dist/index.css";
import "@extscreen/es-ad-front-player-manager/dist/index.css";

import {ESComponent} from "@extscreen/es-component";
Vue.use(ESComponent)

第3步：ESPage页面中中引入组件

点击查看源码

<template>
  <div class="es-ad-player-root-css">
    <es-ad-front-player-manager
        ref="es_ad_player_manager"
        class="es-ad-player-manager-css"
        :ad-player-view-list="adPlayerViewList"
        :ad-test-server="true"
        :player-window-type="2"
        :player-z-index="0"
        @onPlayerPlaying="onPlayerPlaying"
        @onPlayerStopped="onPlayerStopped"
        @onPlayerCompleted="onPlayerCompleted"/>
  </div>
</template>
<script>
import {ESADFrontPlayerManager} from "@extscreen/es-ad-front-player-manager";

export default {
  components: {
    'es-ad-front-player-manager': ESADFrontPlayerManager,
  }
}
</script>

第4步：播放广告

1、广告提供者AdProvider

点击查看源码

import {ES_AD_TYPE_LAUNCH} from "@extscreen/es-ad-player";

export function adProvider(provideParams) {
    return new Promise(function (resolve, reject) {
        let result = {
            adId: 'extscreen-cast',
            mediaId: '222',
            adType: ES_AD_TYPE_LAUNCH,
            adCount: 1,
        }
        resolve(result);
    });
}

2、注册广告提供者并且播放

点击查看源码

let playInfo = {
    seriesIndex: 0,
    seriesList: [{
        id: 0,
        urls: {
            urlIndex: 0,
            urlList: [],
        },
        urlsProvider: {
            support: true,
            provider: adProvider,
            providerParams: {}
        }
    }]
}
this.$refs.es_ad_player_manager.playVideo(playInfo);