编写第一个视频播放页面

示例代码

点击查看源码

<template>
  <div class="es_player_manager_root">
    <es-player-manager
      //窗口类型为全屏
      :init-player-window-type="1"
      //注册播放器列表
      :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 {ESVideoPlayer} from "@extscreen/es-video-player";
export default {
  name: 'es_player_manager_sample',
  mixins: [ESLifecycleMixin],
  data() {
    return {
      //播放器列表
      esPlayerList: [ESVideoPlayer],
    };
  },
  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，和ESVideoPlayer的类型保持一致。
      }
      //视频分集列表集合数据结构
      let playInfo = {
        seriesIndex: 0,//从分集列表集合中第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: {
    //引入ESPlayerManager组件
    'es-player-manager': ESPlayerManager,
  }
};
</script>

<style scoped>

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

</style>
}