快应用

Appearance

视频播放器集成 ​

集成和使用视频播放组件ESVideoPlayer

第1步：package.json引入库 ​

点击查看源码
js
"@extscreen/es-component": "3.0.1",
"@extscreen/es-player": "^x.x.x",
"@extscreen/es-video-player": "^x.x.x"

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

点击查看源码
js
//引入css
import "@extscreen/es-video-player/dist/index.css";

//注册组件
import {ESComponent} from "@extscreen/es-component";
Vue.use(ESComponent)

第3步：ESPage页面中中引入组件 ​

点击查看源码
vue

<template>
  <es-video-player
      ref="es_video_player"
      :player-type="0"
      :play-next-on-error="true"
      :player-width="1920"
      :player-height="1080"
      :player-z-index="100"
      :on-progress-changed-callback="onVideoProgressChanged"
      :on-duration-changed-callback="onVideoDurationChanged"
      @onPlayerInitialized="onVideoPlayerInitialized"
      @onVolumeChanged="onVideoVolumeChanged"
      @onLeftVolumeChanged="onVideoLeftVolumeChanged"
      @onRightVolumeChanged="onVideoRightVolumeChanged"
      @onPlayerSizeChanged="onVideoPlayerSizeChanged"
      @onPlayerPreparing="onVideoPlayerPreparing"
      @onPlayerPrepared="onVideoPlayerPrepared"
      @onPlayerPlaying="onVideoPlayerPlaying"
      @onPlayerPaused="onVideoPlayerPaused"
      @onPlayerResumed="onVideoPlayerResumed"
      @onPlayerStopped="onVideoPlayerStopped"
      @onPlayerCompleted="onVideoPlayerCompleted"
      @onPlayerError="onVideoPlayerError"
      @onPlayerInfo="onVideoPlayerInfo"
      @onPlayUrls="onVideoPlayUrls"
      @onPlayUrl="onVideoPlayUrl"
      @onNoUrlCanPlay="onVideoNoUrlCanPlay"
      @onPlayerBufferStart="onVideoPlayerBufferStart"
      @onPlayRateChanged="onVideoPlayRateChanged"
      @onPlayRateListChanged="onVideoPlayRateListChanged"
      @onDefinitionChanged="onVideoDefinitionChanged"
      @onDefinitionListChanged="onVideoDefinitionListChanged"
      @onAllAspectRatioChanged="onVideoAllAspectRatioChanged"
      @onAspectRatioChanged="onVideoAspectRatioChanged"
      @onPlayerBufferEnd="onVideoPlayerBufferEnd"/>
</template>
<script>
import {ESVideoPlayer} from "@extscreen/es-video-player";

export default {
  data() {
    return {};
  },
  mounted() {
  },
  methods: {},
  components: {
    'es-video-player': ESVideoPlayer,
  }
};
</script>

第4步：设置播放地址 ​

点击查看源码
js
let url = {
    url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/data_center/videos/SHORT/DEFAULT/2022/09/30/4998e703-fcb3-4046-935b-1519ba9523dc.mp4',
}
let urls = {
    urlIndex: 0,
    urlList: [url],
}
let statrtPosition = {};
this.$refs.es_video_player.playUrls(urls, statrtPosition);

第5步：开始播放 ​

点击查看源码
vue
this.$refs.es_video_player.start();