快应用

Appearance

视频播放组件集成 ​

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

第1步：package.json引入库 ​

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

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

点击查看源码
js
import {ESComponent} from "@extscreen/es-component";
Vue.use(ESComponent)

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

点击查看源码
vue
<es-video-player-view-component
  ref="es_video_player_view"
  :style="{width : playerWidth, height : playerHeight, zIndex : playerZIndex}"
  :on-duration-changed-callback="onDurationChanged"
  :on-progress-changed-callback="onProgressChanged"
  @player-volume-changed="onPlayerVolumeChanged"
  @player-left-volume-changed="onLeftVolumeChanged"
  @player-right-volume-changed="onRightVolumeChanged"
  @player-status-changed="onPlayerStatusChanged"
  @player-aspect-ratio-list-changed="onAllAspectRatioChanged"
  @player-aspect-ratio-changed="onAspectRatioChanged"
  @player-rate-list-changed="onAllPlayRateChanged"
  @player-rate-changed="onPlayRateChanged"
  @player-error="onPlayerError"
  @player-info="onPlayerInfo"/>

第4步：设置播放地址 ​

点击查看源码
js
let url = 'http://qcloudcdn-moss.cp47.ott.cibntv.net/data_center/videos/SHORT/DEFAULT/2022/10/26/1990888c-f241-4ca8-89ac-020a396d25e3_transcode_1137855.mp4'
this.$refs.es_video_player.play(
    url,                    //播放地址
    0,                      //画面比例
    1,                      //左声道音量
    1,                      //右声道音量
    null,                   //播放器参数
    1,                      //播放器类型
    true                    //是否使用硬解码
);

第5步：开始播放 ​

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