快应用

Appearance

自定义播放界面 ​

1. 自定义播放界面 ​

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

  • ESPlayerView类如下：
点击查看源码
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: {
    onVideoPlayerInitialized(playerType) {
    },
    onVideoPlayerPlayInfo(playInfo) {
    },
    onVideoPlayerPlaySeries(series) {
    },
    onVideoPlayerPlayUrls(urlList) {
    },
    onVideoPlayerPlayUrl(url) {
    },
    onVideoPlayerPreparing() {
    },
    onVideoPlayerPrepared() {
    },
    onVideoPlayerBufferStart() {
    },
    onVideoPlayerBufferEnd() {
    },
    onVideoPlayerPlaying() {
    },
    onVideoPlayerProgressChanged(progress) {
    },
    onVideoPlayerDurationChanged(duration) {
    },
    onVideoPlayerSeekStart() {
    },
    onVideoPlayerSeekCompleted() {
    },
    onVideoPlayerPaused() {
    },
    onVideoPlayerResumed() {
    },
    onVideoPlayerSizeChanged() {
    },
    onVideoPlayerDefinitionListChanged(definitionList) {
    },
    onVideoPlayerDefinitionChanged(definition) {
    },
    onVideoPlayerPlayRateListChanged(rateList) {
    },
    onVideoPlayerPlayRateChanged(rate) {
    },
    onVideoPlayerDecodeListChanged(decodeList) {
    },
    onVideoPlayerDecodeChanged(decode) {
    },
    onVideoPlayerAspectRatioListChanged(aspectRatioList) {
    },
    onVideoPlayerAspectRatioChanged(aspectRatio) {
    },
    onVideoPlayerStopped() {
    },
    onVideoPlayerCompleted() {
    },
    onVideoPlayerError(errorCode, errorMessage) {
    },
    onVideoPlayerInfo(type, code, message) {
    },
    onVideoPlayerNoUrlCanPlay(next) {
    },
    onVideoPlayerWindowTypeChanged(playerWindowType) {
    },
  },
}
  • 自定义播放器界面

示例代码

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

//
import {ESPlayerView} from "@extscreen/es-player";
export default {
  //------------------------------------------------
  //1.引入 ESPlayerView
  mixins: [ESPlayerView],
  methods: {
    //------------------------------------------------
    onVideoPlayerPlayInfo(playInfo) {
      this.playerInfo = JSON.stringify(playInfo);
    },
    onVideoPlayerPlaySeries(series) {
      this.seriesInfo = JSON.stringify(series);
    },
    onVideoPlayerPlayUrls(urlList) {
      this.urlsInfo = JSON.stringify(urlList);
    },
    onVideoPlayerPlayUrl(url) {
      this.urlInfo = JSON.stringify(url);
    },
    onVideoPlayerPlaying() {
    },
    //覆写其他方法
    //...
    //------------------------------------------------
  },
}
</script>

2. 注册播放器界面 ​

ESPlayerManager的属性esPlayerViewList是vue component数组。
用来承载自定义的播放器界面组件

点击查看源码
vue
<template>
  ...
    <es-player-manager
      //注册播放器界面
      :es-player-view-list="esPlayerViewList"
      ref="es_player_manager"/>
  ...
</template>

<script>
....
import ESPlayerHelloView from "./es_player_hello_view";

export default {
  ...
  data() {
    return {
      //-------------------------------------------
      //注册播放器界面
      esPlayerViewList: [ESPlayerHelloView],
      //-------------------------------------------
    };
    ...
  },
};
</script>
...

3. 代码示例 ​

  • 自定义播放器界面 es_player_hello_view.vue
点击查看源码
js
<template>
  <div class="es-player-view-root-css"
       :style="{width : playerViewWidth, height : playerViewHeight}">
    <span class="es-player-view-title-css">{{ playerInfo }}</span>
    <span class="es-player-view-title-css">{{ seriesInfo }}</span>
    <span class="es-player-view-title-css">{{ urlsInfo }}</span>
    <span class="es-player-view-title-css">{{ urlInfo }}</span>
  </div>
</template>

<script>

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

const TAG = "ESPlayerHelloView";

export default {
  name: 'ESPlayerHelloView',
  mixins: [ESPlayerView],
  data() {
    return {
      playerInfo: '',
      seriesInfo: '',
      urlsInfo: '',
      urlInfo: '',

      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;
      }
    },
    onVideoPlayerPlayInfo(playInfo) {
      this.playerInfo = JSON.stringify(playInfo);
    },
    onVideoPlayerPlaySeries(series) {
      this.seriesInfo = JSON.stringify(series);
    },
    onVideoPlayerPlayUrls(urlList) {
      this.urlsInfo = JSON.stringify(urlList);
    },
    onVideoPlayerPlayUrl(url) {
      this.urlInfo = JSON.stringify(url);
    },
    onVideoPlayerPlaying() {
    },
    //覆写其他方法
  },
  components: {}
}
</script>

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

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

</style>
  • 注册播放器界面 es_player_view_sample.vue
点击查看源码
js
<template>
  <div class="es-player-manager-root">
    <es-player-manager
      :init-player-window-type="2"
      :es-player-list="esPlayerList"
      :es-player-view-list="esPlayerViewList"
      ref="es_player_manager"/>
  </div>
</template>

<script>
import {
  ESPlayerManager,
} from "@extscreen/es-player-manager";
import {ESLifecycleMixin} from "@extscreen/es-core";
import {ESVideoPlayer} from "@extscreen/es-video-player";

import ESPlayerHelloView from "./es_player_hello_view";

export default {
  name: 'es_player_view_sample',
  mixins: [ESLifecycleMixin],
  data() {
    return {
      esPlayerList: [ESVideoPlayer],
      esPlayerViewList: [ESPlayerHelloView],
    };
  },
  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
      }
      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>