自定义暂停广告界面

1. ESADPausedPlayerView

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

• ESADPausedPlayerView类如下：

点击查看源码

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) {
    },
    onADPlayerBufferStart() {
    },
    onADPlayerBufferEnd() {
    },
    onADPlayerClickable(clickable) {
    },
    onADPlayerWindowTypeChanged(playerWindowType) {

    }
  },
}

• 自定义暂停广告界面

示例代码

点击查看源码

<template>
  <!-- 自定义界面 -->
  <div>自定义界面</div
  </div>
</template>
<script>

//
import {ESADPausedPlayerView} from "@extscreen/es-ad-paused-player-manager";

export default {
  //------------------------------------------------
  //1.引入 ESADPausedPlayerView
  mixins: [ESADPausedPlayerView],
  methods: {
    //------------------------------------------------
    onADPlayerPlaySeries(series) {
    },
    onADPlayerPlaying() {
    },
    onADPlayerClickable(clickable) {
    }
    //覆写其他方法
    //...
    //------------------------------------------------
  },
}
</script>

2. 注册暂停广告界面

ESPlayerManager的属性adPausedPlayerViewList是vue component数组。
用来承载自定义的暂停广告界面组件

点击查看源码

<template>
  ...
    <es-player-manager
      //注册暂停广告界面
      :ad-paused-player-view-list="adPausedPlayerViewList"
      ref="es_player_manager"/>
  ...
</template>

<script>
....
import ESADPausedPlayerHelloView from "./es_ad_paused_player_hello_view"

export default {
  ...
  data() {
    return {
      //-------------------------------------------
      //注册暂停广告界面
      adPausedPlayerViewList: [ESADPausedPlayerHelloView],
      //-------------------------------------------
    };
    ...
  },
};
</script>
...

3. 代码示例

• 自定义暂停广告界面 es_ad_paused_player_hello_view.vue

点击查看源码

<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">广告是否可以点击:{{ clickable }}</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 {ESADPausedPlayerView} from "@extscreen/es-ad-paused-player-manager";

const TAG = "ESADPausedPlayerHelloView";

export default {
  name: 'ESADPausedPlayerHelloView',
  mixins: [ESADPausedPlayerView],
  data() {
    return {
      seriesInfo: '',
      clickable: false,

      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() {
    },
    onADPlayerClickable(clickable) {
      this.clickable = clickable;
    },
    //覆写其他方法
    //...
  },
  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_paused_player_view_sample.vue

点击查看源码

<template>
  <div class="es_player_manager_root">
    <es-player-manager
      :init-player-window-type="2"
      :es-player-list="esPlayerList"
      :ad-app-name="appName"
      :ad-app-key="appKey"
      :ad-test-server="true"
      :ad-paused-player-view-list="adPausedPlayerViewList"
      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 {adPausedProvider} from "@/views/ad/ADPausedProvider";
import {ES_AD_TYPE_PAUSED} from "@extscreen/es-ad-player";
import ESADPausedPlayerHelloView from "./es_ad_paused_player_hello_view"

export default {
  name: 'es_ad_paused_player_view_sample',
  mixins: [ESPage],
  data() {
    return {
      appKey: '2ezER7',
      appName: '天气skill',
      esPlayerList: [ESVideoPlayer],
      adPausedPlayerViewList: [ESADPausedPlayerHelloView],
    };
  },
  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,//播放器类型:1
        pauseAD: {
          support: true,
          provider: {
            provider: adPausedProvider,
            providerParams: {
              adId: 'extscreen-pause',
              adType: ES_AD_TYPE_PAUSED,
              adVideoType: '1',
              albumId: '1111',
              mediaId: '1111',
            },
          },
          analyze: {
            test: '1111',
          }
        }
      }
      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>