集成

第1步：package.json引入库

点击查看源码

//ES VUE SDK 核心库
"@extscreen/es-log": "x.x.x",
"@extscreen/es-core": "x.x.x",
"@extscreen/es-component": "3.0.1",

//播放基础库
"@extscreen/es-player": "x.x.x",

//广告播放相关
"@extscreen/es-ad-player": "x.x.x",
"@extscreen/es-ad-paused-player-manager": "x.x.x",
"@extscreen/es-ad-front-player-manager": "x.x.x",
"@extscreen/es-ad-behind-player-manager": "x.x.x",
"@extscreen/es-ad-player-view": "x.x.x",

//视频播放相关
"@extscreen/es-video-player": "^x.x.x",

//播放器管理者
"@extscreen/es-player-manager": "^x.x.x",

第2步：main-native.js中设置ESApp

点击查看源码

import {setESApp} from "@extscreen/es-core";
//设置ESApp
setESApp(app);

第3步：main-native.js中注册组件

点击查看源码

//引入广告组件css
import "@extscreen/es-ad-player/dist/index.css";
import "@extscreen/es-ad-player-view/dist/index.css";
import "@extscreen/es-ad-front-player-manager/dist/index.css";
import "@extscreen/es-ad-paused-player-manager/dist/index.css";
import "@extscreen/es-ad-behind-player-manager/dist/index.css";

//引入视频组件css
import "@extscreen/es-video-player/dist/index.css";
//引入播放器管理者组件css
import "@extscreen/es-player-manager/dist/index.css";

第4步：vue页面中中引入组件

点击查看源码

<template>
    <es-player-manager
       ref="es_player_manager"
      :es-player-list="esPlayerList"
      :play-series-auto-next="true"
      :play-series-auto="true"
      :play-urls-auto="true"
      :play-urls-auto-next="true"
      :play-series-loop="true"
      :small-window-width="890"
      :small-window-height="500"
      :float-window-width="400"
      :float-window-height="230"
      :full-window-width="1920"
      :full-window-height="1080"
      :supportFrontAD="true"
      :supportPauseAD="true"
      :init-player-window-type="1"
      :on-player-progress-changed-callback="onPlayerProgressChanged"
      :on-player-duration-changed-callback="onPlayerDurationChanged"
      class="video_series_player_manager_root"
      @onDecodeChanged="onDecodeChanged"
      @onDecodeListChanged="onDecodeListChanged"
      @onAllAspectRatioChanged="onAllAspectRatioChanged"
      @onAspectRatioChanged="onAspectRatioChanged"
      @onDefinitionChanged="onDefinitionChanged"
      @onDefinitionListChanged="onDefinitionListChanged"
      @onNoSeriesCanPlay="onNoSeriesCanPlay"
      @onNoUrlCanPlay="onNoUrlCanPlay"
      @onPlayRateChanged="onPlayRateChanged"
      @onPlayRateListChanged="onPlayRateListChanged"
      @onPlaySeries="onPlaySeries"
      @onEmptySeriesCanNotPlay="onEmptySeriesCanNotPlay"
      @onPlayUrl="onPlayUrl"
      @onPlayUrls="onPlayUrls"
      @onPlayVideo="onPlayVideo"
      @onPlayerAuthorizeError="onPlayerAuthorizeError"
      @onPlayerAuthorizeSuccess="onPlayerAuthorizeSuccess"
      @onPlayerBufferEnd="onPlayerBufferEnd"
      @onPlayerBufferStart="onPlayerBufferStart"
      @onPlayerCompleted="onPlayerCompleted"
      @onPlayerError="onPlayerError"
      @onPlayerPaused="onPlayerPaused"
      @onPlayerPlaying="onPlayerPlaying"
      @onPlayerResumed="onPlayerResumed"
      @onPlayerStopped="onPlayerStopped"
      @onPlayerSeekCompleted="onPlayerSeekCompleted"
      @onPlayerSeekStart="onPlayerSeekStart"
      @onADPlayerCompleted="onADPlayerCompleted"
      @onADPlayerPlaying="onADPlayerPlaying"
      @onVideoADPlayerPlaying="onVideoADPlayerPlaying"
      @onVideoADPlayerCompleted="onVideoADPlayerCompleted"
      @onVideoPlayerAuthorized="onVideoPlayerAuthorized"
      @onVideoPlayerSetRateError="onVideoPlayerSetRateError"
      @onVideoPlayerSetRateSuccess="onVideoPlayerSetRateSuccess"
      @onPlayerPreviewStart="onPlayerPreviewStart"
      @onPlayerPreviewEnd="onPlayerPreviewEnd"
      @onPlayerPreviewError="onPlayerPreviewError"
      @onPlayerLoopPlay="onPlayerLoopPlay"
      @onPlayPreviousSeries="onPlayPreviousSeries"
      @onPlayNextSeries="onPlayNextSeries"/>
</template>
<script>
    import {
      ESPlayerManager,
    } from "@extscreen/es-player-manager";
    import {ESVideoPlayer} from "@extscreen/es-video-player";
    
    export default {
      data() {
        return {
            esPlayerList: [ESVideoPlayer],
        };
      },
      mounted() {
      },
      methods: {
      },
      components: {
        'es-player-manager': ESPlayerManager,
      }
    };
</script>