快应用

Appearance

自定义前贴广告界面 ​

1. ESADFrontPlayerView ​

ESADFrontPlayerView提供广告播放事件回调接口。
开发者只需要自定义vue组件，mixins``ESADFrontPlayerView，并且覆写需要监听的事件。

  • ESADFrontPlayerView类如下：
点击查看源码
vue
export default {
  props: {
    //小屏
    smallWindowWidth: {
      type: Number,
      default: 976
    },
    smallWindowHeight: {
      type: Number,
      default: 557
    },

    //全屏
    fullWindowWidth: {
      type: Number,
      default: 1920
    },
    fullWindowHeight: {
      type: Number,
      default: 1080
    },

    //浮动
    floatWindowWidth: {
      type: Number,
      default: 400
    },
    floatWindowHeight: {
      type: Number,
      default: 230
    },

    //窗口类型
    playerWindowType: {
      type: Number,
      default: 1
    },
  },
  methods: {
    onADPlayerPlaySeries(series) {
    },
    onADPlayerPlaying() {
    },
    onADPlayerPaused() {
    },
    onPlayerResumed() {
    },
    onADPlayerStopped() {
    },
    onADPlayerCompleted() {
    },
    onADPlayerError(errorCode, errorMessage) {
    },
    onADPlayerExitTimeChanged(time) {
    },
    onADPlayerDurationChanged(duration) {
    },
    onADPlayerProgressChanged(progress) {
    },
    onADPlayerBufferStart() {
    },
    onADPlayerBufferEnd() {
    },
    onADPlayerClickable(clickable) {
    },
    onADPlayerWindowTypeChanged(playerWindowType) {

    }
  },
}
  • 自定义前贴广告界面

示例代码

点击查看源码
js
<template>
  <!-- 自定义界面 -->
  <div>自定义界面</div
  </div>
</template>
<script>

//
import {ESADFrontPlayerView} from "@extscreen/es-ad-front-player-manager";

export default {
  //------------------------------------------------
  //1.引入 ESADFrontPlayerView
  mixins: [ESADFrontPlayerView],
  methods: {
    //------------------------------------------------
    getView() {
      return this.$refs.ad_player_manager_view;
    },
    onADPlayerPlaySeries(series) {
    },
    onADPlayerPlaying() {
    },
    onADPlayerStopped() {
    },
    onADPlayerCompleted() {
    },
    onADPlayerError(errorCode, errorMessage) {
        //do sth
    },
    onADPlayerExitTimeChanged(time) {
        //do sth
    },
    onADPlayerDurationChanged(duration) {
        //do sth
    },
    onADPlayerProgressChanged(progress) {
      //do sth
    },
    onADPlayerWindowTypeChanged(playerWindowType) {
    },
    onADPlayerClickable(clickable) {
    },
    //覆写其他方法
    //...
    //------------------------------------------------
  },
}
</script>

2. 注册前贴广告界面 ​

ESPlayerManager的属性adFrontPlayerViewList是vue component数组。
用来承载自定义的前贴广告界面组件

点击查看源码
vue
<template>
  ...
    <es-player-manager
      //注册前贴广告界面
      :ad-front-player-view-list="adFrontPlayerViewList"
      ref="es_player_manager"/>
  ...
</template>

<script>
....
import ESADFrontPlayerHelloView from "./es_ad_front_player_hello_view";

export default {
  ...
  data() {
    return {
      //-------------------------------------------
      //注册前贴广告界面
      adFrontPlayerViewList: [ESADFrontPlayerHelloView],
      //-------------------------------------------
    };
    ...
  },
};
</script>
...

3. 代码示例 ​

  • 自定义前贴广告界面 es_ad_front_player_hello_view.vue
点击查看源码
js
<template>
  <div class="es-ad-player-view-root-css"
       :style="{width : playerViewWidth, height : playerViewHeight}">
    <span class="es-ad-player-view-title-css">{{ seriesInfo }}</span>
    <span class="es-ad-player-view-title-css">广告时长:{{ duration }}</span>
    <span class="es-ad-player-view-title-css">广告进度:{{ progress }}</span>
  </div>
</template>

<script>

import {
  ES_PLAYER_WINDOW_TYPE_FLOAT,
  ES_PLAYER_WINDOW_TYPE_FULL,
  ES_PLAYER_WINDOW_TYPE_SMALL
} from "@extscreen/es-player-manager";
import {ESADFrontPlayerView} from "@extscreen/es-ad-front-player-manager";

const TAG = "ESADFrontPlayerHelloView";

export default {
  name: 'ESADFrontPlayerHelloView',
  mixins: [ESADFrontPlayerView],
  data() {
    return {
      seriesInfo: '',
      canExitTime: 0,
      duration: 0,
      progress: 0,

      playerViewWidth: 0,
      playerViewHeight: 0,
    }
  },
  mounted() {
    this.initPlayerView();
  },
  methods: {
    initPlayerView() {
      switch (this.playerWindowType) {
        case ES_PLAYER_WINDOW_TYPE_SMALL:
          this.playerViewWidth = this.smallWindowWidth;
          this.playerViewHeight = this.smallWindowHeight;
          break;
        case ES_PLAYER_WINDOW_TYPE_FULL:
          this.playerViewWidth = this.fullWindowWidth;
          this.playerViewHeight = this.fullWindowHeight;
          break;
        case ES_PLAYER_WINDOW_TYPE_FLOAT:
          this.playerViewWidth = this.floatWindowWidth;
          this.playerViewHeight = this.floatWindowHeight;
          break;
      }
    },
    onADPlayerPlaySeries(series) {
      this.seriesInfo = JSON.stringify(series);
    },
    onADPlayerPlaying() {
    },
    onADPlayerExitTimeChanged(time) {
    },
    onADPlayerDurationChanged(duration) {
      this.duration = duration;
    },
    onADPlayerProgressChanged(progress) {
      this.progress = progress;
    },
    //覆写其他方法
  },
  components: {}
}
</script>

<style scoped>
.es-ad-player-view-root-css {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.es-ad-player-view-title-css {
  width: 1920px;
  height: 100px;
  background-color: #F7B500;
  font-size: 20px;
  color: #FFFFFF;
}

</style>
  • 注册前贴广告界面 es_ad_front_player_view_sample.vue
点击查看源码
js
<template>
  <div class="es_player_manager_root">
    <es-player-manager
      :init-player-window-type="2"
      :ad-app-name="appName"
      :ad-app-key="appKey"
      :ad-test-server="true"
      :ad-front-player-view-list="adFrontPlayerViewList"
      :es-player-list="esPlayerList"
      ref="es_player_manager"/>
  </div>
</template>

<script>
import {
  ESPlayerManager,
} from "@extscreen/es-player-manager";
import {ESPage} from "@extscreen/es-core";
import {ESVideoPlayer} from "@extscreen/es-video-player";
import ESADFrontPlayerHelloView from "./es_ad_front_player_hello_view"
import {adProvider} from "@/views/ad/ADProvider";

export default {
  name: 'es_ad_front_player_view_sample',
  mixins: [ESPage],
  data() {
    return {
      appKey: '2ezER7',
      appName: '天气skill',
      esPlayerList: [ESVideoPlayer],
      adFrontPlayerViewList: [ESADFrontPlayerHelloView],
    };
  },
  mounted() {
    this.playVideo();
  },
  methods: {
    playVideo() {
      let series = {
        id: 0,
        urls: {
          urlIndex: 0,
          urlList: [{
            url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
          }],
        },
        playerType: 1,
        frontAD: {
          support: true,
          provider: {
            provider: adProvider,
            providerParams: {
              adVideoType: 'xxxx',
              albumId: 'xxxxx',
              mediaId: 'xxxxx',
            },
          },
        },
      }
      let playInfo = {
        seriesIndex: 0,
        seriesList: [series]
      }
      this.$refs.es_player_manager.playVideo(playInfo);
    },
    onESResume() {
      this.$refs.es_player_manager.resume();
    },
    onESPause() {
      this.$refs.es_player_manager.stop();
    },
    onESDestroy() {
      this.$refs.es_player_manager.release();
    },
  },
  components: {
    'es-player-manager': ESPlayerManager,
  }
};
</script>

<style scoped>

.es_player_manager_root {
  width: 1920px;
  height: 1080px;
  background-color: black;
}

</style>