自定义播放器

本章我们自定义图片播放器ESImagePlayer

1. ESLazyInitPlayer

简介

ESLazyInitPlayer封装了播放器初始化的相关方法。

• playerInitialized属性。用v-if="playerInitialized"用来控制播放器标签是否初始化
• initializePlayer()方法。初始化播放器
• isPlayerInitialized()方法。返回播放器是否初始化

ESPlayerManager调用播放器播放分集的时候，首先会调用isPlayerInitialized()方法判断播放器是否初始化。
如果没有初始化，则首先调用initializePlayer()进行播放器的初始化。

集成

• 第一步： mixins: [ESLazyInitPlayer]
• 第二步：播放器标签添加v-if="playerInitialized"。

示例代码：

点击查看源码

<template>
  <div class="es-image-player-root-css">
    <!-- ------------------------------------------ -->
    //v-if="playerInitialized"控制图片播放器的初始化
    <img :src="imageUrl" v-if="playerInitialized">
    <!-- ------------------------------------------ -->
  </div>
</template>

<script>

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

const TAG = "ESImagePlayer"
export default {
  //------------------------------------------
  //引入ESLazyInitPlayer
  mixins: [ESLazyInitPlayer],
  //------------------------------------------
  name: 'ESImagePlayer',
  data() {
    return {
      imageUrl: '',
    }
  },
}
</script>

<style scoped>
.es-image-player-root-css {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>

2. ESPlayer

简介

ESPlayer提供了播放器相关的方法和播放事件回调。

自定义播放器必须实现ESPlayer提供的方法如下：

• getPlayer()返回播放器的ref引用。
• getPlayerType()返回播放器类型，Number类型。0-10为ESPlayerManager内置预留类型。自定义播放器类型需要返回大于10的类型。

其他方法参见ESPlayerAPI文档

集成

• mixins: [ESPlayer]

示例代码：

点击查看源码

<template>
  <div class="es-image-player-root-css">
    <img ref="es_image_player" :src="imageUrl" v-if="playerInitialized">
  </div>
</template>

<script>

import {ESLazyInitPlayer, ESPlayer} from "@extscreen/es-player";

const TAG = "ESImagePlayer"
export default {
  //--------------------------------------------
  mixins: [ESLazyInitPlayer, ESPlayer],
  //--------------------------------------------
  name: 'ESImagePlayer',
  data() {
    return {
      imageUrl: '',
    }
  },
  methods: {
   //-------------------覆写ESPlayer相关方法---------
    //返回播放器引用
    getPlayer() {
      return this.$refs.es_image_player;
    },
    //自定义播放器类型为11
    getPlayerType() {
      return 11;
    }
    //--------------------------------------------
  }
}
</script>

<style scoped>
.es-image-player-root-css {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>

3. 实现播放图片功能

ESPlayerManager调用自定义播放器流程：

• playUrls(playUrlsInfo, startPosition) 播放地址列表集合Urls对象。
• playUrl(index) 播放分集中指定index的地址Url对象。
• play(url, startPosition)播放地址。

自定义播放器ESImagePlayer只需要覆写play(url, startPosition)方法实现播放图片功能即可。

示例代码：

点击查看源码

<template>
  <div class="es-image-player-root-css"
       :style="{width : playerWidth, height : playerHeight}">
    <img ref="es_image_player"
         class="es-image-player-css"
         :src="imageUrl"
         v-if="playerInitialized">
  </div>
</template>

<script>
import {ESLazyInitPlayer, ESPlayer} from "@extscreen/es-player";

export default {
  mixins: [ESLazyInitPlayer, ESPlayer],
  name: 'ESImagePlayer',
  data() {
    return {
      imageUrl: '',
    }
  },
  methods: {
    //返回播放器引用
    getPlayer() {
      return this.$refs.es_image_player;
    },
    //自定义播放器类型为11
    getPlayerType() {
      return 11;
    },
    play(url, startPosition) {
      this.imageUrl = url.url;
    },
    stop() {
      this.imageUrl = "";
    },
  }
}
</script>

<style scoped>
.es-image-player-root-css {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #42b983;
}

.es-image-player-css {
  width: 800px;
  height: 200px;
}
</style>

4. 注册自定义播放器ESImagePlayer

示例代码：

点击查看源码

<template>
  <div class="es_player_manager_root">
    <es-player-manager
      :init-player-window-type="2"
      :es-player-list="esPlayerList"
      ref="es_player_manager"/>
  </div>
</template>

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

export default {
  name: 'es_player_manager_sample',
  mixins: [ESLifecycleMixin],
  data() {
    return {
      //---------------------------------------
      //注册 ESImagePlayer
      esPlayerList: [ESImagePlayer],
      //---------------------------------------
    };
  },
  ...
}

5. 调用ESImagePlayer播放图片

点击查看源码

<template>
  <div class="es-player-manager-root">
    <es-player-manager
      :init-player-window-type="2"
      :es-player-list="esPlayerList"
      ref="es_player_manager"/>
  </div>
</template>

<script>

import {
  ESPlayerManager,
} from "@extscreen/es-player-manager";
import {ESLifecycleMixin} from "@extscreen/es-core";
import ESImagePlayer from "./es-image-player";

export default {
  name: 'es_player_sample',
  mixins: [ESLifecycleMixin],
  data() {
    return {
      esPlayerList: [ESImagePlayer],
    };
  },
  mounted() {
    this.playVideo();
  },
  methods: {
    playVideo() {
      let series = {
        id: 0,
        urls: {
          urlIndex: 0,
          urlList: [{
            url: 'https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2022/01/26/9a6992b0-05db-413c-9dbb-ab012ee8e742.jpg',
          }],
        },
        //***********************************
        playerType: 11,//播放器类型:11
        //***********************************
      }
      let playInfo = {
        seriesIndex: 0,
        seriesList: [series]
      }
      this.$refs.es_player_manager.playVideo(playInfo);
    },
  },
  components: {
    'es-player-manager': ESPlayerManager,
  }
};
</script>

<style scoped>

.es-player-manager-root {
  width: 1920px;
  height: 1080px;
  background-color: black;
}
</style>