Skip to content

ESVideoPlayer

属性

onProgressChangedCallback

功能描述

播放进度回调方法。

参数

属性类型默认值必填说明
onProgressChangedCallbackFunctionnull回调播放进度

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :on-progress-changed-callback="onProgressChanged"/>
  
<script>
export default {
  methods: {
    onProgressChanged(progress) {
    }
  },
}
</script>

注意

onDurationChangedCallback

功能描述

播放进度回调方法。

参数

属性类型默认值必填说明
onDurationChangedCallbackFunctionnull回调视频时长

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :on-duration-changed-callback="onDurationChanged"/>
  
<script>
export default {
  methods: {
    onDurationChanged(duration) {
    }
  },
}
</script>

注意

playerType

功能描述

设置播放器类型。

参数

属性类型默认值必填说明
playerTypeNumbernull自定义播放器类型

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :player-type="0"/>

注意

positivePlay

功能描述

是否正序播放视频地址。

参数

属性类型默认值必填说明
positivePlayBooleannull是否正序播放视频地址

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :positive-play="true"/>

注意

playNextOnError

功能描述

播放出错的时候是否继续播放下一个地址。

参数

属性类型默认值必填说明
playNextOnErrorBooleannull播放出错的时候是否继续播放下一个地址

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :play-next-on-error="true"/>

注意

autoPlay

功能描述

调用playUrls方法后是否自动调用start方法进行播放。

参数

属性类型默认值必填说明
autoPlayBooleannull调用playUrls方法后是否自动调用start方法进行播放

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :auto-play="true"/>

注意

playerWidth

功能描述

播放器的宽度。

参数

属性类型默认值必填说明
playerWidthNumbernull播放器的宽度

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :player-width="1920"/>

注意

playerHeight

功能描述

播放器的高度。

参数

属性类型默认值必填说明
playerHeightNumbernull播放器的高度

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :player-height="1080"/>

注意

playerZIndex

功能描述

播放器的界面层级。

参数

属性类型默认值必填说明
playerZIndexNumbernull播放器的界面层级

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  :player-z-index="100"/>

注意

getPlayer()

功能描述

返回标签ref引用。

参数

示例代码

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

注意

方法

playUrls(Object playUrlsInfo, Object startPosition)

功能描述

播放地址列表。

参数

Object playUrlsInfo

属性类型默认值必填说明
urlIndexNumbernull播放地址列表index
urlListArraynull播放地址列表 Object playUrl数组

Object playUrl

属性类型默认值必填说明
urlStringnull视频地址
aspectRatioNumbernull画面比例
leftVolumeNumbernull左声道音量
rightVolumeNumbernull右声道音量

Object startPosition

属性类型默认值必填说明
supportBooleannull是否支持从固定的位置播放视频
positionNumbernull播放视频的位置

示例代码

点击查看源码
js
  let url1 = {
    url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
  }
  let ur2 = {
    url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
  }
  let urls = {
    urlIndex: 0,
    urlList: [url1, ur2],
  }
  let startPosition = {
    support: true,
    position: 1000,
  }
  this.$refs.es_video_player.playUrls(urls, startPosition);

注意

playUrl(Number index)

功能描述

播放视频列表中指定index的视频地址。

参数

属性类型默认值必填说明
indexNumber0视频列表中inde

示例代码

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

注意

play(Object playUrl)

功能描述

播放视频。

参数

Object playUrl

属性类型默认值必填说明
urlStringnull视频地址
aspectRatioNumbernull画面比例
leftVolumeNumbernull左声道音量
rightVolumeNumbernull右声道音量

示例代码

点击查看源码
js
  let url = {
    url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
  }
  this.$refs.es_video_player.play(url);

注意

playNextOrPreviousUrl()

功能描述

根据positivePlay的值,进行播放上一个或者下一个视频地址。

参数

示例代码

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

注意

playNextUrl()

功能描述

播放下一个视频地址。

参数

示例代码

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

注意

playPreviousUrl()

功能描述

播放上一个视频地址。

参数

示例代码

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

注意

start()

功能描述

开始播放。

参数

示例代码

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

注意

seekTo(Number progress)

功能描述

快进。

参数

属性类型默认值必填说明
progressNumber0播放进度

示例代码

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

注意

resume()

功能描述

继续播放。

参数

返回值

示例代码

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

注意

pause()

功能描述

暂停播放。

参数

返回值

示例代码

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

注意

stop()

功能描述

停止播放。

参数

返回值

示例代码

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

注意

reset()

功能描述

重置播放进度。

参数

返回值

示例代码

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

注意

release()

功能描述

回收播放器。

参数

返回值

示例代码

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

注意

setPlayRate(Number playRate)

功能描述

快进。

参数

属性类型默认值必填说明
playRateNumbernull播放速率

播放速率:

export const ES_PLAYER_RATE_0_5 = '0.5';//
export const ES_PLAYER_RATE_0_7_5 = '0.75';//
export const ES_PLAYER_RATE_1 = '1';//
export const ES_PLAYER_RATE_1_2 = '1.2';//
export const ES_PLAYER_RATE_1_2_5 = '1.25';//
export const ES_PLAYER_RATE_1_5 = '1.5';//
export const ES_PLAYER_RATE_1_7_5 = '1.75';//
export const ES_PLAYER_RATE_2 = '2.0';//
export const ES_PLAYER_RATE_2_5 = '2.5';//

示例代码

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

注意

setDefinition(Number definition)

功能描述

设置清晰度。

参数

属性类型默认值必填说明
definitionNumbernull清晰度

清晰度:

export const ES_PLAYER_DEFINITION_UNKNOWN = -1;//
export const ES_PLAYER_DEFINITION_SD = 0;//
export const ES_PLAYER_DEFINITION_HD = 1;//
export const ES_PLAYER_DEFINITION_FULL_HD = 2;//
export const ES_PLAYER_DEFINITION_ORIGINAL = 3;//
export const ES_PLAYER_DEFINITION_BLUERAY = 4;//
export const ES_PLAYER_DEFINITION_FOURK = 5;//

示例代码

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

注意

setDecode(Number decode)

功能描述

设置解码方式。

参数

属性类型默认值必填说明
decodeNumbernull解码方式

解码:

export const ES_PLAYER_DECODE_IJK = 0;//
export const ES_PLAYER_DECODE_EXO = 1;//
export const ES_PLAYER_DECODE_HARDWARE = 2;//
export const ES_PLAYER_DECODE_IJK_SOFT = 3;//

示例代码

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

注意

setAspectRatio(Number aspectRatio)

功能描述

设置画面比例。

参数

属性类型默认值必填说明
aspectRatioNumbernull画面比例

画面比例:

export const ES_PLAYER_AR_ASPECT_FIT_PARENT = 0;//
export const ES_PLAYER_AR_ASPECT_FILL_PARENT = 1;//
export const ES_PLAYER_AR_ASPECT_WRAP_CONTENT = 2;//
export const ES_PLAYER_AR_ASPECT_MATCH_PARENT = 3;//
export const ES_PLAYER_AR_16_9_FIT_PARENT = 4;//
export const ES_PLAYER_AR_4_3_FIT_PARENT = 5;//
export const ES_PLAYER_AR_235_FIT_PARENT = 6;//

示例代码

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

注意

getCurrentPosition()

功能描述

获取当前的播放进度。

参数

返回值

示例代码

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

注意

通过onProgressChangedCallback回调方法返回当前的播放进。

getDuration()

功能描述

获取当前的播放时长。

参数

返回值

示例代码

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

注意

通过onDurationChangedCallback回调方法返回播放时长。

clickPlayerView()

功能描述

点击播放器view。

参数

返回值

示例代码

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

注意

requestPlayerViewLayout()

功能描述

重新绘制播放器view。

参数

返回值

示例代码

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

注意

setUsingHardwareDecoder(Boolean value)

功能描述

设置播放器使用硬解码。

参数

属性类型默认值必填说明
valueBoolean设置播放器是否使用硬解码

示例代码

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

注意

setPlayerType(Number playerType)

功能描述

设置播放器类型。

参数

属性类型默认值必填说明
playerTypeNumber播放器类型

播放器类型:

export const ES_PLAYER_TYPE_ANDROID_MEDIA = 1;//
export const ES_PLAYER_TYPE_IJK_MEDIA = 2;//

示例代码

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

注意

getLeftVolume()

功能描述

获取视频左声道音量。返回值通过onLeftVolumeChanged事件回调

参数

示例代码

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

注意

getRightVolume()

功能描述

获取视频左声道音量。返回值通过onRightVolumeChanged事件回调

参数

示例代码

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

注意

setLeftVolume(Number leftVolume)

功能描述

设置左声道的音量。

参数

属性类型默认值必填说明
leftVolumeNumber音量

示例代码

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

注意

setRightVolume(Number rightVolume)

功能描述

设置右声道的音量。

参数

属性类型默认值必填说明
rightVolumeNumber音量

示例代码

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

注意

setVolume(Number volume)

功能描述

设置左右声道的音量。

参数

属性类型默认值必填说明
volumeNumber音量

示例代码

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

注意

setLeftRightVolume(Number leftVolume, Number rightVolume)

功能描述

设置左右声道的音量。

参数

属性类型默认值必填说明
leftVolumeNumber左声道音量
rightVolumeNumber右声道音量

示例代码

点击查看源码
js
this.$refs.es_video_player.setLeftRightVolume(0.8, 0.8);

注意

setStopped(Boolean stopped)

功能描述

设置播放器停止。

参数

属性类型默认值必填说明
stoppedBoolean设置播放器是否停止

示例代码

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

注意

setEnabled(Boolean enabled)

功能描述

设置播放器是否可用。

参数

属性类型默认值必填说明
enabledBoolean设置播放器是否可用

示例代码

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

注意

回调事件

onPlayerInitialized(playerType)

功能描述

播放器初始化完成。

参数

属性类型默认值必填说明
playerTypeNumber播放器类型

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerInitialized="onVideoPlayerInitialized"/>
  
<script>
export default {
  methods: {
    onVideoPlayerInitialized(playerType) {
    },
  },
}
</script>

注意

onPlayUrls(playUrlsInfo)

功能描述

播放地址信息回调。

参数

Object playUrlsInfo

属性类型默认值必填说明
urlIndexNumbernull播放地址列表index
urlListArraynull播放地址列表 Object playUrl数组

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayUrls="onVideoPlayUrls"/>
  
<script>
export default {
  methods: {
    onVideoPlayUrls(playUrlsInfo) {
    },
  },
}
</script>

注意

onPlayUrl(playUrl)

功能描述

播放地址信息回调。

参数

Object playUrl

属性类型默认值必填说明
urlStringnull视频地址
aspectRatioNumbernull画面比例
leftVolumeNumbernull左声道音量
rightVolumeNumbernull右声道音量

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayUrl="onVideoPlayUrl"/>
  
<script>
export default {
  methods: {
    onVideoPlayUrl(playUrl) {
    },
  },
}
</script>

注意

onPlayerPreparing()

功能描述

播放preparing状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerPreparing="onVideoPlayerPreparing"/>
  
<script>
export default {
  methods: {
    onVideoPlayerPreparing() {
    },
  },
}
</script>

注意

onPlayerPrepared()

功能描述

播放prepared状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerPrepared="onVideoPlayerPrepared"/>
  
<script>
export default {
  methods: {
    onVideoPlayerPrepared() {
    },
  },
}
</script>

注意

onPlayerPlaying()

功能描述

播放playing状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerPlaying="onVideoPlayerPlaying"/>
  
<script>
export default {
  methods: {
    onVideoPlayerPlaying() {
    },
  },
}
</script>

注意

onPlayerPaused()

功能描述

播放paused状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerPaused="onVideoPlayerPaused"/>
  
<script>
export default {
  methods: {
    onVideoPlayerPaused() {
    },
  },
}
</script>

注意

onPlayerResumed()

功能描述

播放resume状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerResumed="onVideoPlayerResumed"/>
  
<script>
export default {
  methods: {
    onVideoPlayerResumed() {
    },
  },
}
</script>

注意

onPlayerStopped()

功能描述

播放stop状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerStopped="onVideoPlayerStopped"/>
  
<script>
export default {
  methods: {
    onVideoPlayerStopped() {
    },
  },
}
</script>

注意

onPlayerCompleted()

功能描述

播放complete状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerCompleted="onVideoPlayerCompleted"/>
  
<script>
export default {
  methods: {
    onVideoPlayerCompleted() {
    },
  },
}
</script>

注意

onPlayerBufferStart()

功能描述

播放缓冲开始状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerBufferStart="onVideoPlayerBufferStart"/>
  
<script>
export default {
  methods: {
    onVideoPlayerBufferStart() {
    },
  },
}
</script>

注意

onPlayerBufferEnd()

功能描述

播放缓冲结束状态。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerBufferEnd="onVideoPlayerBufferEnd"/>
  
<script>
export default {
  methods: {
    onVideoPlayerBufferEnd() {
    },
  },
}
</script>

注意

onPlayerSizeChanged()

功能描述

播放器尺寸改变。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerSizeChanged="onVideoPlayerSizeChanged"/>
<script>
export default {
  methods: {
    onVideoPlayerSizeChanged() {
    },
  },
}
</script>

注意

onNoUrlCanPlay(Boolean next)

功能描述

没有播放地址可以播放。

参数

Boolean next

属性类型默认值必填说明
nextBooleannull向后播放还是向前播放没有播放地址

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onNoUrlCanPlay="onVideoNoUrlCanPlay"/>
  
<script>
export default {
  methods: {
    onVideoNoUrlCanPlay(next) {
    },
  },
}
</script>

注意

onPlayerError(Number errorCode, String errorMessage)

功能描述

播放错误。

参数

属性类型默认值必填说明
errorCodeNumbernull播放错误码
errorMessageNumbernull播放错误信息

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerError="onVideoPlayerError"/>
  
<script>
export default {
  methods: {
    onVideoPlayerError(errorCode, errorMessage) {
    },
  },
}
</script>

注意

onAllAspectRatioChanged(aspectRatioList)

功能描述

画面比例列表。

参数

Array aspectRatioList 画面比例列表

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onAllAspectRatioChanged="onVideoAllAspectRatioChanged"/>
  
<script>
export default {
  methods: {
    onVideoAllAspectRatioChanged(aspectRatioList) {
    },
  },
}
</script>

注意

onAspectRatioChanged(aspectRatio)

功能描述

当前的画面比例。

参数

aspectRatio 当前的画面比例

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onAspectRatioChanged="onVideoAspectRatioChanged"/>
  
<script>
export default {
  methods: {
    onVideoAspectRatioChanged(aspectRatio) {
    },
  },
}
</script>

注意

onVolumeChanged(Number leftVolume, Number rightVolume)

功能描述

声音变化。

参数

属性类型默认值必填说明
leftVolumeNumbernull左声道音量
rightVolumeNumbernull右声道音量

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onVolumeChanged="onVideoVolumeChanged"/>
  
<script>
export default {
  methods: {
    onVideoVolumeChanged(leftVolume, rightVolume) {
    },
  },
}
</script>

注意

onLeftVolumeChanged(Number volume)

功能描述

左声道音量变化。

参数

属性类型默认值必填说明
volumeNumbernull音量

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onLeftVolumeChanged="onVideoLeftVolumeChanged"/>
  
<script>
export default {
  methods: {
    onVideoLeftVolumeChanged(volume) {
    },
  },
}
</script>

注意

onRightVolumeChanged(Number volume)

功能描述

左声道音量变化。

参数

属性类型默认值必填说明
volumeNumbernull音量

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onRightVolumeChanged="onVideoRightVolumeChanged"/>
  
<script>
export default {
  methods: {
    onVideoRightVolumeChanged(volume) {
    },
  },
}
</script>

注意

onDefinitionListChanged(Array definitionList)

功能描述

清晰度列表。

参数

属性类型默认值必填说明
definitionListArraynull清晰度列表

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onDefinitionListChanged="onVideoDefinitionListChanged"/>
  
<script>
export default {
  methods: {
    onVideoDefinitionListChanged(definitionList) {
    },
  },
}
</script>

注意

onDefinitionChanged(Number definition)

功能描述

视频当前的清晰度。

参数

属性类型默认值必填说明
definitionNumbernull视频当前的清晰度

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onDefinitionChanged="onVideoDefinitionChanged"/>
  
<script>
export default {
  methods: {
    onVideoDefinitionChanged(definition) {
    },
  },
}
</script>

注意

onPlayRateListChanged(Array rateList)

功能描述

播放速率列表。

参数

属性类型默认值必填说明
rateListArraynull播放速率列表

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayRateListChanged="onVideoPlayRateListChanged"/>
  
<script>
export default {
  methods: {
    onVideoPlayRateListChanged(rateList) {
    },
  },
}
</script>

注意

onPlayRateChanged(Number rate)

功能描述

当前播放速率。

参数

属性类型默认值必填说明
rateNumbernull当前播放速率

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayRateChanged="onVideoPlayRateChanged"/>
  
<script>
export default {
  methods: {
    onVideoPlayRateChanged(rate) {
    },
  },
}
</script>

注意

onDecodeListChanged(Array decodeList)

功能描述

解码类型列表。

参数

属性类型默认值必填说明
decodeListArraynull解码类型列表

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onDecodeListChanged="onVideoDecodeListChanged"/>
  
<script>
export default {
  methods: {
    onVideoDecodeListChanged(decodeList) {
    },
  },
}
</script>

注意

onDecodeChanged(Number decode)

功能描述

当前视频解码类型。

参数

属性类型默认值必填说明
decodeNumbernull当前视频解码类型

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onDecodeChanged="onVideoDecodeChanged"/>
  
<script>
export default {
  methods: {
    onVideoDecodeChanged(decode) {
    },
  },
}
</script>

注意

onPlayerSeekStart()

功能描述

开始快进。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerSeekStart="onVideoPlayerSeekStart"/>
  
<script>
export default {
  methods: {
    onVideoPlayerSeekStart() {
    },
  },
}
</script>

注意

onPlayerSeekCompleted()

功能描述

快进完成。

参数

示例代码

点击查看源码
js
<es-video-player
  ref="es_video_player"
  @onPlayerSeekCompleted="onVideoPlayerSeekCompleted"/>
  
<script>
export default {
  methods: {
    onVideoPlayerSeekCompleted() {
    },
  },
}
</script>

注意