播放管理器 ESPlayerManager ​

简介 ​

ESPlayerManager 是一套集成了广告、视频播放功能的完整的播放管理组件。 ESPlayerManager支持开发者可以自定义以下功能:

  • 集成自有视频播放器
  • 视频播放界面
  • 视频播放事件监听
  • 广告播放界面
  • 广告播放事件监听

示例 ​

你可以在quicktvui-playground 上查看示例。

你可以在quicktvui-api-demo-vue3 上查看API Demo。

数据结构 ​

ESMediaItem ​

媒资条目

参数描述类型必填
id媒资的唯一标识符number | string否
mediaSourceList媒资资源列表ESMediaSourceList否
playerType播放器的类型number否
interceptors媒资条目拦截器Array<ESIPlayerInterceptor>否
position媒资播放位置ESPlayerPosition否
metadata媒资信息ESMediaMetadata否
previousRollADList前贴片广告资源列表ESMediaSourceList否
middleRollADList中插广告资源列表ESMediaSourceList否
postRollADList后贴广告资源列表ESMediaSourceList否
adPlayerType广告播放器类型number否

ESMediaItemList ​

媒资条目列表

参数描述类型必填
index默认播放媒资条目的索引number是
list媒资条目列表Array<ESMediaItem>是
interceptors媒资条目列表拦截器Array<ESIPlayerInterceptor>否
metadata媒资信息ESMediaMetadata否

属性 ​

参数描述类型必填默认值
playerList播放器数组列表Array<ESIPlayer>是[]
playerViewList播放器视图数组列表Array<ESIPlayerManagerView>否[]
adPlayerList广告播放器数组列表Array<ESIPlayer>否
adPlayerViewList广告播放器视图数组列表Array<ESIPlayerManagerView>否[]
adChannel广告的渠道string否''
adDebug是否开启广告调试模式boolean否false
adTest是否开启广告测试环境boolean否false
playMediaAuto是否自动播放媒资boolean否true
playMediaSourceAuto是否自动播放媒资数据源boolean否true
playMediaSourceListMode媒资数据源播放模式ESPlayerPlayMode否ES_PLAYER_PLAY_MODE_ONCE
playerBackgroundColor播放管理器背景颜色string否transparent
smallWindowWidth播放小窗口模式宽度number否976
smallWindowHeight播放小窗口模式高度number否557
fullWindowWidth播放全屏窗口模式宽度number否1920
fullWindowHeight播放全屏窗口模式高度number否1080
floatWindowWidth播放浮动窗口模式宽度number否400
floatWindowHeight播放浮动窗口模式高度number否230
initPlayerWindowType初始化播放窗口模式ESPlayerWindowType否ES_PLAYER_WINDOW_TYPE_SMALL
isEnabled播放管理器是否可用boolean否true

事件 ​

onPlayerPlayMediaList ​

完整事件声明：onPlayerPlayMediaList(playList: ESMediaItemList):void
播放媒资条目列表事件。

参数描述类型非空
playList媒资条目列表ESMediaItemList是

onPlayerPlayMedia ​

完整事件声明：onPlayerPlayMedia(mediaItem: ESMediaItem):void
播放媒资条目事件。

参数描述类型非空
mediaItem媒资条目ESMediaItem是

onPlayerInterceptSuccess ​

完整事件声明：onPlayerInterceptSuccess(result: ESPlayerInterceptResult):void
播放拦截器成功事件。

参数描述类型非空
result拦截器结果ESPlayerInterceptResult是

onPlayerInterceptError ​

完整事件声明：onPlayerInterceptError(error: ESPlayerInterceptError):void
播放拦截器错误事件。

参数描述类型非空
error拦截器错误ESPlayerInterceptError是

onPlayerNoMediaCanPlay ​

完整事件声明：onPlayerNoMediaCanPlay(next: boolean):void
无媒资可播放事件。

参数描述类型非空
next是否是向后播放顺序boolean是

onPlayerProgressChanged ​

完整事件声明：onPlayerProgressChanged(progress: number):void
播放进度事件。

参数描述类型非空
progress播放进度number是

onPlayerDurationChanged ​

完整事件声明：onPlayerDurationChanged(duration: number):void
播放总长度事件。

参数描述类型非空
duration视频播放总长度number是

onPlayerInitialized ​

完整事件声明：onPlayerInitialized():void
播放器初始化事件。

onPlayerPlayMediaSourceList ​

完整事件声明：onPlayerPlayMediaSourceList(mediaSourceList: ESMediaSourceList):void
播放媒资资源列表事件。

参数描述类型非空
mediaSourceList媒资资源列表ESMediaSourceList是

onPlayerPlayMediaSource ​

完整事件声明：onPlayerPlayMediaSource(mediaSource: ESMediaSource):void
播放媒资资源事件。

参数描述类型非空
mediaSource媒资资源ESMediaSource是

onPlayerNoMediaSourceCanPlay ​

完整事件声明：onPlayerNoMediaSourceCanPlay(next: boolean):void
无媒资资源可播放事件。

参数描述类型非空
next是否是向后播放顺序boolean是

onPlayerViewSizeChanged ​

完整事件声明：onPlayerViewSizeChanged(playerWidth: number, playerHeight: number):void
播放器尺寸变化事件。

参数描述类型非空
playerWidth播放器宽度number是
playerHeight播放器高度number是

onPlayerInfo ​

完整事件声明：onPlayerInfo(info: ESPlayerInfo):void
播放信息事件。

参数描述类型非空
info播放信息ESPlayerInfo是

onPlayerError ​

完整事件声明：onPlayerError(error: ESPlayerError):void
播放错误事件。

参数描述类型非空
error播放错误ESPlayerError是

onPlayerPreparing ​

完整事件声明：onPlayerPreparing():void
播放器准备中事件。

onPlayerPrepared ​

完整事件声明：onPlayerPrepared():void
播放器准备好事件。

onPlayerPlaying ​

完整事件声明：onPlayerPlaying():void
播放器开始播放事件。

onPlayerPaused ​

完整事件声明：onPlayerPaused():void
播放器暂停播放事件。

onPlayerResumed ​

完整事件声明：onPlayerResumed():void
播放器恢复播放事件。

onPlayerStopped ​

完整事件声明：onPlayerStopped():void
播放器停止播放事件。

onPlayerCompleted ​

完整事件声明：onPlayerCompleted():void
播放器播放完毕事件。

onPlayerBufferStart ​

完整事件声明：onPlayerBufferStart():void
播放器开始缓冲事件。

onPlayerBufferEnd ​

完整事件声明：onPlayerBufferEnd():void
播放器缓冲结束事件。

onPlayerSeekStart ​

完整事件声明：onPlayerSeekStart():void
播放器开始快进事件。

onPlayerSeekCompleted ​

完整事件声明：onPlayerSeekCompleted():void
播放器快进结束事件。

onPlayerLeftVolumeChanged ​

完整事件声明：onPlayerLeftVolumeChanged(volume: number):void
播放器左声道音量变化事件。

参数描述类型非空
volume左声道音量number是

onPlayerRightVolumeChanged ​

完整事件声明：onPlayerRightVolumeChanged(volume: number):void
播放器右声道音量变化事件。

参数描述类型非空
volume右声道音量number是

onPlayerVolumeChanged ​

完整事件声明：onPlayerVolumeChanged(leftVolume: number, rightVolume: number):void
播放器音量变化事件。

参数描述类型非空
leftVolume左声道音量number是
rightVolume右声道音量number是

onPlayerDefinitionListChanged ​

完整事件声明：onPlayerDefinitionListChanged(definitionList: Array<ESPlayerDefinition>):void
播放器媒资清晰度列表事件。

参数描述类型非空
definitionList清晰度列表Array<ESPlayerDefinition>是

onPlayerDefinitionChanged ​

完整事件声明：onPlayerDefinitionChanged(definition: ESPlayerDefinition):void
播放器媒资清晰度事件。

参数描述类型非空
definition媒资当前清晰度ESPlayerDefinition是

onPlayerDecodeListChanged ​

完整事件声明：onPlayerDecodeListChanged(decodeList: Array<ESPlayerDecode>):void
播放器解码方式列表事件。

参数描述类型非空
decodeList解码方式列表Array<ESPlayerDecode>是

onPlayerDecodeChanged ​

完整事件声明：onPlayerDecodeChanged(decode: ESPlayerDecode):void
播放器解码方式事件。

参数描述类型非空
decode解码方式ESPlayerDecode是

onPlayerPlayRateListChanged ​

完整事件声明：onPlayerPlayRateListChanged(rateList: Array<ESPlayerRate>):void
播放速率列表事件。

参数描述类型非空
rateList播放速率列表Array<ESPlayerRate>是

onPlayerPlayRateChanged ​

完整事件声明：onPlayerPlayRateChanged(rate: ESPlayerRate):void
播放速率事件。

参数描述类型非空
rate播放速率ESPlayerRate是

onPlayerAspectRatioListChanged ​

完整事件声明：onPlayerAspectRatioListChanged(aspectRatioList: Array<ESPlayerAspectRatio>):void
画面比例列表事件。

参数描述类型非空
aspectRatioList画面比例列表Array<ESPlayerAspectRatio>是

onPlayerAspectRatioChanged ​

完整事件声明：onPlayerAspectRatioChanged(aspectRatio: ESPlayerAspectRatio):void
画面比例事件。

参数描述类型非空
aspectRatio画面比例ESPlayerAspectRatio是

onPlayerRenderListChanged ​

完整事件声明：onPlayerRenderListChanged(renderList: Array<ESPlayerRender>):void
渲染模式列表事件。

参数描述类型非空
renderList渲染模式列表Array<ESPlayerRender>是

onPlayerRenderChanged ​

完整事件声明：onPlayerRenderChanged(render: ESPlayerRender):void
渲染模式事件。

参数描述类型非空
render渲染模式ESPlayerRender是

onPlayerPlayMediaListModeListChanged ​

完整事件声明：onPlayerPlayMediaListModeListChanged(playModeList: Array<ESPlayerPlayMode>): void
播放媒资列表模式列表事件。

参数描述类型非空
playModeList播放媒资列表模式列表Array<ESPlayerPlayMode>是

onPlayerPlayMediaListModeChanged ​

完整事件声明：onPlayerPlayMediaListModeChanged(playMode: ESPlayerPlayMode): void
播放媒资列表模式事件。

参数描述类型非空
playMode播放媒资列表模式ESPlayerPlayMode是

onPlayerPlayMediaSourceListModeListChanged ​

完整事件声明：onPlayerPlayMediaSourceListModeListChanged(playModeList: Array<ESPlayerPlayMode>): void
播放媒资资源列表模式列表事件。

参数描述类型非空
playModeList播放媒资资源列表模式列表Array<ESPlayerPlayMode>是

onPlayerPlayMediaSourceListModeChanged ​

完整事件声明：onPlayerPlayMediaSourceListModeChanged(playMode: ESPlayerPlayMode): void
播放媒资资源列表模式事件。

参数描述类型非空
playMode播放媒资资源列表模式ESPlayerPlayMode是

onPlayerWindowTypeChanged ​

完整事件声明：onPlayerWindowTypeChanged(windowType: ESPlayerWindowType): void
播放管理器窗口变化事件。

参数描述类型非空
windowType窗口类型ESPlayerWindowType是

接口 ​

initialize ​

该方法用于初始化播放管理器。
完整方法声明：function initialize(): void

  • 参数
    无

  • 返回值：

属性描述类型默认值
无无返回值void

isInitialized ​

该方法用于判断播放管理器是否初始化。

完整方法声明：function isInitialized(): boolean

  • 参数
    无

  • 返回值：

  • 返回值：

属性描述类型默认值
无是否初始化。booleanfalse

setVisible ​

该方法用于设置播放管理器是否可见。

完整方法声明：function setVisible(value: boolean): void

  • 参数：
参数描述类型非空
value是否可见boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

playMediaSourceList ​

该方法用于播放媒资资源列表。

完整方法声明：function playMediaSourceList(mediaSourceList: ESMediaSourceList): void

  • 参数：
参数描述类型非空
mediaSourceList媒资资源列表ESMediaSourceList是
  • 返回值：
属性描述类型默认值
无无返回值void

playMediaSourceByIndex ​

该方法用于根据媒资资源索引进行播放。

完整方法声明：function playMediaSourceByIndex(index: number): void

  • 参数：
参数描述类型非空
index媒资资源索引number是
  • 返回值：
属性描述类型默认值
无无返回值void

playMediaSourceById ​

该方法用于根据媒资资源唯一标识符进行播放。

完整方法声明：function playMediaSourceById(id: string): void

  • 参数：
参数描述类型非空
id媒资资源唯一标识符string是
  • 返回值：
属性描述类型默认值
无无返回值void

playMediaSource ​

该方法用于播放媒资资源。

完整方法声明：function playMediaSource(mediaSource: ESMediaSource): void

  • 参数：
参数描述类型非空
mediaSource媒资资源ESMediaSource是
  • 返回值：
属性描述类型默认值
无无返回值void

playNextMediaSource ​

该方法用于播放下一个媒资资源。

完整方法声明：function playNextMediaSource(): void

  • 参数：
    无

  • 返回值：

属性描述类型默认值
无无返回值void

playPreviousMediaSource ​

该方法用于播放上一个媒资资源。

完整方法声明：function playPreviousMediaSource(): void

  • 参数：
    无

  • 返回值：

属性描述类型默认值
无无返回值void

getMediaSourceList ​

该方法用于获取正在播放的媒资资源列表。

完整方法声明：function getMediaSourceList(): Array<ESMediaSource> | null

  • 参数：
    无

  • 返回值：

属性描述类型默认值
无媒资资源列表Array<ESMediaSource> | null

getMediaSource ​

该方法用于根据媒资资源索引获取媒资资源。

完整方法声明：function getMediaSource(index: number): ESMediaSource | null

  • 参数：
属性描述类型非空
index媒资资源索引number是
  • 返回值：
属性描述类型默认值
无媒资资源列表ESMediaSource | nullnull

getPlayingMediaSourceIndex ​

该方法用于获取正在播放的媒资资源的索引。

完整方法声明：function getPlayingMediaSourceIndex(): number

  • 参数：

无

  • 返回值：
属性描述类型默认值
无媒资资源的索引number-1

getPlayingMediaSourceList ​

该方法用于获取正在播放的媒资资源列表。

完整方法声明：function getPlayingMediaSourceList(): ESMediaSourceList | null

  • 参数：

无

  • 返回值：
属性描述类型默认值
无媒资资源列表ESMediaSourceList | nullnull

getPlayingMediaSource ​

该方法用于获取正在播放的媒资资源。

完整方法声明：function getPlayingMediaSource(): ESMediaSource | null

  • 参数：

无

  • 返回值：
属性描述类型默认值
无正在播放的媒资资源ESMediaSource | nullnull

play ​

该方法用于调用播放器的播放方法。

完整方法声明：function play(...params: Array<any>): void

  • 参数：
属性描述类型非空
params可变参数列表Array<any>否
  • 返回值：
属性描述类型默认值
无无返回值void

start ​

该方法用于调用播放器的开始播放方法。

完整方法声明：function start(position: number): void

  • 参数：
属性描述类型非空
position媒资开始播放的位置number否
  • 返回值：
属性描述类型默认值
无无返回值void

pause ​

该方法用于暂停播放器播放。

完整方法声明：function pause(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

resume ​

该方法用于恢复播放器播放。

完整方法声明：function resume(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

stop ​

该方法用于停止播放器播放。

完整方法声明：function stop(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

reset ​

该方法用于重置播放器。

完整方法声明：function reset(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

release ​

该方法用于回收播放器资源。

完整方法声明：function release(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

seekTo ​

该方法用于播放快进。

完整方法声明：function seekTo(progress: number): void

  • 参数：
属性描述类型非空
progress媒资播放的进度number是
  • 返回值：
属性描述类型默认值
无无返回值void

getDuration ​

该方法用于获取播放总时长。

完整方法声明：function getDuration(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

getCurrentPosition ​

该方法用于获取当前播放的进度。

完整方法声明：function getCurrentPosition(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

setSize ​

该方法用于设置播放器的尺寸。

完整方法声明：function setSize(width: number, height: number): void

  • 参数：
属性描述类型非空
width播放器的宽度number是
height播放器的高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setPlayRate ​

该方法用于设置播放速率。

完整方法声明：function setPlayRate(playRate: ESPlayerRate): void

  • 参数：
属性描述类型非空
playRate播放速率ESPlayerRate是
  • 返回值：
属性描述类型默认值
无无返回值void

setPlayMode ​

该方法用于设置播放模式。

完整方法声明：function setPlayMode(playMode: ESPlayerPlayMode): void

  • 参数：
属性描述类型非空
playMode播放模式ESPlayerPlayMode是
  • 返回值：
属性描述类型默认值
无无返回值void

setDefinition ​

该方法用于设置播放媒资清晰度。

完整方法声明：function setDefinition(definition: ESPlayerDefinition): void

  • 参数：
属性描述类型非空
definition媒资清晰度ESPlayerDefinition是
  • 返回值：
属性描述类型默认值
无无返回值void

setCache ​

该方法用于设置播放缓存策略。

完整方法声明：function setCache(cache: ESPlayerCache): void

  • 参数：
属性描述类型非空
cache缓存策略ESPlayerCache是
  • 返回值：
属性描述类型默认值
无无返回值void

setDecode ​

该方法用于设置播放解码方式。

完整方法声明：function setDecode(decode: ESPlayerDecode): void

  • 参数：
属性描述类型非空
decode解码方式ESPlayerDecode是
  • 返回值：
属性描述类型默认值
无无返回值void

setRender ​

该方法用于设置播放渲染方式。

完整方法声明：function setRender(render: ESPlayerRender): void

  • 参数：
属性描述类型非空
render渲染方式ESPlayerRender是
  • 返回值：
属性描述类型默认值
无无返回值void

setAspectRatio ​

该方法用于设置播放画面比例。

完整方法声明：function setAspectRatio(aspectRatio: ESPlayerAspectRatio): void

  • 参数：
属性描述类型非空
aspectRatio画面比例ESPlayerAspectRatio是
  • 返回值：
属性描述类型默认值
无无返回值void

getLeftVolume ​

该方法用于获取左声道音量。

完整方法声明：function getLeftVolume(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

getRightVolume ​

该方法用于获取右声道音量。

完整方法声明：function getRightVolume(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

setLeftVolume ​

该方法用于设置左声道音量。

完整方法声明：function setLeftVolume(leftVolume: number): void

  • 参数：
属性描述类型非空
leftVolume左声道音量number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightVolume ​

该方法用于设置右声道音量。

完整方法声明：function setRightVolume(rightVolume: number): void

  • 参数：
属性描述类型非空
rightVolume右声道音量number是
  • 返回值：
属性描述类型默认值
无无返回值void

setVolume ​

该方法用于设置右声道音量。

完整方法声明：function setVolume(volume: number): void

  • 参数：
属性描述类型非空
volume音量number是
  • 返回值：
属性描述类型默认值
无无返回值void

getVolume ​

该方法用于设置右声道音量。

完整方法声明：function getVolume(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

setStopped ​

该方法用于设置播放管理器的停止状态。

完整方法声明：function setStopped(stopped: boolean): void

  • 参数：
属性描述类型非空
stopped是否停止状态boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setEnabled ​

该方法用于设置播放管理器的可用状态。

完整方法声明：function setEnabled(enabled: boolean): void

  • 参数：
属性描述类型非空
enabled是否可用状态boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressCallback ​

该方法用于设置播放进度回调。

完整方法声明：function setProgressCallback(callback: ESPlayerProgressCallback): void

  • 参数：
属性描述类型非空
callback进度回调ESPlayerProgressCallback是
  • 返回值：
属性描述类型默认值
无无返回值void

setDurationCallback ​

该方法用于设置播放总进度回调。

完整方法声明：function setDurationCallback(callback: ESPlayerDurationCallback): void

  • 参数：
属性描述类型非空
callback总进度回调ESPlayerDurationCallback是
  • 返回值：
属性描述类型默认值
无无返回值void

invalidate ​

该方法用于刷新播放视图。

完整方法声明：function invalidate(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

playMediaList ​

该方法用于播放媒资列表。

完整方法声明：function playMediaList(playList: ESMediaItemList): void

  • 参数：
属性描述类型非空
playList媒资列表ESMediaItemList是
  • 返回值：
属性描述类型默认值
无无返回值void

playMediaByIndex ​

该方法用于播放指定索引的媒资。

完整方法声明：function playMediaByIndex(index: number): void

  • 参数：
属性描述类型非空
index媒资索引number是
  • 返回值：
属性描述类型默认值
无无返回值void

playMediaById ​

该方法用于播放指定唯一标识符的媒资。

完整方法声明：function playMediaById(id: string): void

  • 参数：
属性描述类型非空
id唯一标识符string是
  • 返回值：
属性描述类型默认值
无无返回值void

playMedia ​

该方法用于播放媒资。

完整方法声明：function playMedia(mediaItem: ESMediaItem): void

  • 参数：
属性描述类型非空
mediaItem媒资ESMediaItem是
  • 返回值：
属性描述类型默认值
无无返回值void

addMediaToLast ​

该方法用于添加媒资列表到播放列表的末尾。

完整方法声明：function addMediaToLast(mediaItemList: Array<ESMediaItem>): void

  • 参数：
属性描述类型非空
mediaItemList媒资列表Array<ESMediaItem>是
  • 返回值：
属性描述类型默认值
无无返回值void

addMediaToFirst ​

该方法用于添加媒资列表到播放列表的首位。

完整方法声明：function addMediaToFirst(mediaItemList: Array<ESMediaItem>): void

  • 参数：
属性描述类型非空
mediaItemList媒资列表Array<ESMediaItem>是
  • 返回值：
属性描述类型默认值
无无返回值void

addMediaToIndex ​

该方法用于添加媒资列表到播放列表的指定位置。

完整方法声明：function addMediaToIndex(index: number, mediaItemList: Array<ESMediaItem>): void

  • 参数：
属性描述类型非空
index位置number是
mediaItemList媒资列表Array<ESMediaItem>是
  • 返回值：
属性描述类型默认值
无无返回值void

replaceMedia ​

该方法用于替换媒资列表指定位置媒资。

完整方法声明：function replaceMedia(beginIndex: number, mediaItemList: Array<ESMediaItem>): void

  • 参数：
属性描述类型非空
beginIndex位置number是
mediaItemList媒资列表Array<ESMediaItem>是
  • 返回值：
属性描述类型默认值
无无返回值void

getMediaList ​

该方法用于获取播放的媒资列表。

完整方法声明：function getMediaList(): Array<ESMediaItem> | null

  • 参数：

无

  • 返回值：
属性描述类型默认值
无播放媒资列表Array<ESMediaItem> | null

getMedia ​

该方法用于获取指定索引的媒资。

完整方法声明：function getMedia(index: number): ESMediaItem | null

  • 参数：
属性描述类型非空
index位置number是
  • 返回值：
属性描述类型默认值
无媒资ESMediaItem | null

getPlayingMediaIndex ​

该方法用于获取正在播放的媒资的索引。

完整方法声明：function getPlayingMediaIndex(): number

  • 参数：

无

  • 返回值：
属性描述类型默认值
无播放的媒资的索引number

getPlayingMediaList ​

该方法用于获取正在播放的媒资列表。

完整方法声明：function getPlayingMediaList(): ESMediaItemList | null

  • 参数：

无

  • 返回值：
属性描述类型默认值
无正在播放的媒资列表ESMediaItemList | null

getPlayingMedia ​

该方法用于获取正在播放的媒资。

完整方法声明：function getPlayingMedia(): ESMediaItem | null

  • 参数：

无

  • 返回值：
属性描述类型默认值
无正在播放的媒资ESMediaItem | null

getWindowType ​

该方法用于获取当前播放管理器的窗口类型。

完整方法声明：function getWindowType(): ESPlayerWindowType

  • 参数：

无

  • 返回值：
属性描述类型默认值
无当前播放管理器的窗口类型ESPlayerWindowType

setFloatWindow ​

该方法用于设置播放管理器浮动窗口。

完整方法声明：function setFloatWindow(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

setSmallWindow ​

该方法用于设置播放管理器小窗口。

完整方法声明：function setSmallWindow(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

setFullWindow ​

该方法用于设置播放管理器全屏窗口。

完整方法声明：function setFullWindow(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

setWindowType ​

该方法用于设置播放管理器全屏窗口。

完整方法声明：function setWindowType(windowType: ESPlayerWindowType): void

  • 参数：
属性描述类型非空
windowType窗口类型ESPlayerWindowType是
  • 返回值：
属性描述类型默认值
无无返回值void

setPlayMediaListMode ​

该方法用于设置播放媒资模式。

完整方法声明：function setPlayMediaListMode(playMode: ESPlayerPlayMode): void

  • 参数：
属性描述类型非空
playMode播放模式ESPlayerPlayMode是
  • 返回值：
属性描述类型默认值
无无返回值void

canPlayNextMedia ​

该方法用于判断是否可以播放视频列表下一个媒资。

完整方法声明：function canPlayNextMedia(): boolean

  • 参数：

无

  • 返回值：
属性描述类型默认值
无是否可以播放视频列表下一个媒资boolean

playNextMedia ​

该方法用于播放下一个媒资。

完整方法声明：function playNextMedia(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

canPlayPreviousMedia ​

该方法用于判断是否可以播放视频列表上一个媒资。

完整方法声明：function canPlayPreviousMedia(): boolean

  • 参数：

无

  • 返回值：
属性描述类型默认值
无是否可以播放视频列表上一个媒资boolean

playPreviousMedia ​

该方法用于播放上一个媒资。

完整方法声明：function playPreviousMedia(): void

  • 参数：

无

  • 返回值：
属性描述类型默认值
无无返回值void

onKeyDown ​

该方法用于处理按键按下逻辑。

完整方法声明：onKeyDown(keyEvent: ESKeyEvent): boolean

  • 参数：
属性描述类型非空
keyEvent按键事件ESKeyEvent是
  • 返回值：
属性描述类型默认值
无返回是否消费按键按下事件boolean

onKeyUp ​

该方法用于处理按键抬起逻辑。

完整方法声明：onKeyUp(keyEvent: ESKeyEvent): boolean

  • 参数：
属性描述类型非空
keyEvent按键事件ESKeyEvent是
  • 返回值：
属性描述类型默认值
无返回是否消费按键抬起事件boolean

onBackPressed ​

该方法用于处理返回键逻辑。

完整方法声明：onBackPressed(): boolean

  • 参数：

无

  • 返回值：
属性描述类型默认值
无返回是否消费返回键逻辑boolean

基础用法 ​

点击查看源码
vue
<template>
	<div class='es-sdk-root-css'>
		<es-player-manager
			ref='playerManager'
			:initPlayerWindowType='2'
			:playerList='playerListRef'
			class='es-video-player-manager-page-css' />
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';

import {markRaw, ref} from 'vue';
import {ESMediaSource, ESMediaSourceList} from '@extscreen/es3-player';
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from '@extscreen/es3-player-manager';
import {ESVideoPlayer} from '@extscreen/es3-video-player';

const TAG = 'ESVideoPlayerManagerPage';

export default defineComponent({
	name: '基础用法',
	components: {
		'es-player-manager': ESPlayerManager,
	},
	setup: function(props, context) {

		const playerManager = ref<ESIPlayerManager>();

		const playerList = [markRaw(ESVideoPlayer)];
		const playerListRef = ref(playerList);

		let isPaused = false;

		const onESCreate = (params) => {
			isPaused = false;
			let mediaSource: ESMediaSource = {
				uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4',
			};
			let mediaSourceList: ESMediaSourceList = {
				index: 0,
				list: [mediaSource],
			};
			let mediaItem: ESMediaItem = {
				mediaSourceList: mediaSourceList,
			};
			let playList: ESMediaItemList = {
				index: 0,
				list: [mediaItem],
			};
			playerManager.value?.initialize();
			playerManager.value?.playMediaList(playList);
		};
		const onESResume = () => {
			if (isPaused) {
				playerManager.value?.resume();
			}
			isPaused = false;
		};
		const onESPause = () => {
			isPaused = true;
			playerManager.value?.stop();
		};
		const onESDestroy = () => {
			playerManager.value?.release();
		};

		return {
			onESCreate,
			onESResume,
			onESPause,
			onESDestroy,
			playerListRef,
			playerManager,
		};
	},
});

</script>

<style>
.es-video-player-manager-page-css {
	position: absolute;
}
</style>

播放控制 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerPlayMediaSource="onPlayerPlayMediaSource"
      @onPlayerPlaying="onPlayerPlaying"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-row-css">
      <span class="es-player-manager-text-css" text="总时长："/>
      <span class="es-player-manager-text-css" :text="duration + '' "/>
      <span class="es-player-manager-text-css" text="当前进度："/>
      <span class="es-player-manager-text-css" :text="progress + '' "/>
    </div>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放上一集" @onButtonClicked="playPreviousMedia"/>
      <s-text-button text="播放下一集" @onButtonClicked="playNextMedia"/>
      <span class="es-player-manager-text-css" text="播放MediaItem索引："/>
      <span class="es-player-manager-text-css" :text="playingMediaItemIndex + '' "/>
      <span class="es-player-manager-text-css" text="播放MediaItem："/>
      <span class="es-player-manager-text-css" :text="playingMediaItem + '' "/>
    </div>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放上一源" @onButtonClicked="playPreviousMediaSource"/>
      <s-text-button text="播放下一源" @onButtonClicked="playNextMediaSource"/>
      <span class="es-player-manager-text-css" text="播放MediaSource索引："/>
      <span class="es-player-manager-text-css" :text="playingMediaSourceIndex + '' "/>
      <span class="es-player-manager-text-css" text="播放MediaSource："/>
      <span class="es-player-manager-text-css" :text="playingMediaSource + '' "/>
    </div>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="开始" @onButtonClicked="start"/>
      <s-text-button text="暂停" @onButtonClicked="pause"/>
      <span class="es-player-manager-text-css" text="             "/>
      <s-text-button text="恢复" @onButtonClicked="resume"/>
      <s-text-button text="停止" @onButtonClicked="stop"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESMediaSource} from "@extscreen/es3-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '播放控制',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()
    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    const playingMediaItem = ref('')
    const playingMediaItemIndex = ref(-1)

    const playingMediaSource = ref('')
    const playingMediaSourceIndex = ref(-1)

    let isPaused = false

    const duration = ref(0)
    const progress = ref(0)
    let durationTimer = null
    let progressTimer = null


    function onPlayerPlayMedia(mediaItem: ESMediaItem) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
      }
      playingMediaItem.value = JSON.stringify(mediaItem)
      playingMediaItemIndex.value = playerManager.value?.getPlayingMediaIndex() ?? -1
    }

    function onPlayerPlayMediaSource(mediaSource: ESMediaSource) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMediaSource---------->>>>>", mediaSource)
      }
      playingMediaSource.value = JSON.stringify(mediaSource)
      playingMediaSourceIndex.value = playerManager.value?.getPlayingMediaSourceIndex() ?? -1
    }

    function playPreviousMedia() {
      playerManager.value?.playPreviousMedia()
    }

    function playNextMedia() {
      playerManager.value?.playNextMedia()
    }

    function playPreviousMediaSource() {
      playerManager.value?.playPreviousMediaSource()
    }

    function playNextMediaSource() {
      playerManager.value?.playNextMediaSource()
    }

    //
    function start() {
      playerManager.value?.start(0)
    }

    function pause() {
      playerManager.value?.pause()
    }

    function resume() {
      playerManager.value?.resume()
    }

    function stop() {
      stopDurationTimer()
      stopProgressTimer()
      playerManager.value?.stop()
    }

    function durationCallback(d: number) {
      duration.value = d
    }

    function progressCallback(p: number) {
      progress.value = p
    }

    function startDurationTimer() {
      stopDurationTimer()
      durationTimer = setInterval(() => {
        if (log.isLoggable(ESLogLevel.DEBUG)) {
          log.e(TAG, "-------getDuration---------->>>>>")
        }
        playerManager.value?.getDuration()
      }, 500);
    }

    function stopDurationTimer() {
      if (durationTimer) {
        clearInterval(durationTimer);
      }
    }

    function startProgressTimer() {
      stopProgressTimer()
      progressTimer = setInterval(() => {
        if (log.isLoggable(ESLogLevel.DEBUG)) {
          log.e(TAG, "-------getCurrentPosition---------->>>>>")
        }
        playerManager.value?.getCurrentPosition()
      }, 500);
    }

    function stopProgressTimer() {
      if (progressTimer) {
        clearInterval(progressTimer);
      }
    }

    const onPlayerPlaying = () => {
      startDurationTimer()
      startProgressTimer()
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      let mediaItem_0: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/23/7bd80eb0-6a46-4210-b571-19407f036f0c.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/12/d5a1137c-8bf5-4e48-8017-1f683a913661.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/08/24f6bef3-7f7a-4fd1-a1b8-c3a40ba27d5c.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/2c529e68-0a81-4d9d-8dc1-f334c2a083ed.mp4'
            }
          ]
        },
      }
      let mediaItem_1: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/03/08/3af6f84b-f112-48bb-955d-dee58d0e2cce.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/04/02/2e948bf8-7822-45a1-8b54-c57c70c916f1.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/26/8bfff5ec-af9a-4073-ac95-2096bf31fbc3_transcode_1137855.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/25/c7c3fb1b-11ea-4452-ae89-6665d44487bf_transcode_1137855.mp4'
            },
          ]
        },
      }

      let mediaItem_2: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4'
            }, {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/cd3c86d4-37a8-4c52-8d0c-7ef2cbf1d224_transcode_1137855.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/72254d7a-4653-42ad-aaaa-f5be7b2a8ad5_transcode_1137855.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/a006834a-b093-4ab9-8691-090394af3a75_transcode_1137855.mp4'
            }
          ]
        },
      }

      let mediaItem_3: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/0ec11cc9-dec8-469a-a0b8-0ae735bc7420_transcode_1137855.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/7bb303c0-5ff2-438a-8459-21199668e4fc_transcode_1137855.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/13d108a4-ad53-40b6-a092-e9fe0e903925_transcode_1137855.mp4'
            },
            {
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/aa8d0dad-705c-4430-9cf9-6f68eedd02b7_transcode_1137855.mp4'
            }]
        },
      }

      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_0, mediaItem_1, mediaItem_2, mediaItem_3]
      }
      playerManager.value?.initialize()
      playerManager.value?.setDurationCallback(durationCallback)
      playerManager.value?.setProgressCallback(progressCallback)
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      duration,
      progress,
      playingMediaItemIndex,
      playingMediaItem,
      playingMediaSourceIndex,
      playingMediaSource,
      playPreviousMedia,
      playNextMedia,
      playPreviousMediaSource,
      playNextMediaSource,
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onPlayerPlayMedia,
      onPlayerPlayMediaSource,
      onPlayerPlaying,
      start,
      pause,
      resume,
      stop,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}

.es-player-manager-text-css {
  color: white;
  font-size: 30px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>

播放窗口切换 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :smallWindowWidth="570"
      :smallWindowHeight="324"
      :fullWindowWidth="1920"
      :fullWindowHeight="1080"
      :floatWindowWidth="192"
      :floatWindowHeight="108"
      :initPlayerWindowType="1"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="切换全屏窗口" @onButtonClicked="changeToFullWindow"/>
      <s-text-button text="切换小屏窗口" @onButtonClicked="changeToSmallWindow"/>
      <s-text-button text="切换浮动窗口" @onButtonClicked="changeToFloatWindow"/>
      <s-text-button text="切换尺寸" @onButtonClicked="changeWindowSize"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '播放窗口切换',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function changeToFullWindow() {
      playerManager.value?.setFullWindow()
    }

    function changeToSmallWindow() {
      playerManager.value?.setSmallWindow()
    }

    function changeToFloatWindow() {
      playerManager.value?.setFloatWindow()
    }

    function changeWindowSize() {
      playerManager.value?.setSize(192, 108)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      changeToFullWindow,
      changeToSmallWindow,
      changeToFloatWindow,
      changeWindowSize
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

播放起始位置 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList, ESPlayerPosition} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '播放起始位置',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let position: ESPlayerPosition = {
        position: 30000,
        support: true
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
        position: position
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

播放尺寸切换 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="切换尺寸一" @onButtonClicked="changeSizeOne"/>
      <s-text-button text="切换尺寸二" @onButtonClicked="changeSizeTwo"/>
      <s-text-button text="切换尺寸三" @onButtonClicked="changeSizeThree"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '播放尺寸切换',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function changeSizeOne() {
      playerManager.value?.setSize(570, 324)
    }

    function changeSizeTwo() {
      playerManager.value?.setSize(1920, 1080)
    }

    function changeSizeThree() {
      playerManager.value?.setSize(190, 108)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      changeSizeOne,
      changeSizeTwo,
      changeSizeThree
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

自定义播放器 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import ESImagePlayer from "./player/ESImagePlayer.vue";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '自定义播放器',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESImagePlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudimg.a311.ottcn.com/project/zero/img_test/2021/10/20/d40049cf-7b05-4ccc-9a25-74884e883231.jpg'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
        playerType: 3 //TODO 自定义的图片播放器的类型
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

播放事件页面监听 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"
      @onPlayerPlayMediaList="onPlayerPlayMediaList"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
      @onPlayerInterceptError="onPlayerInterceptError"
      @onPlayerNoMediaCanPlay="onPlayerNoMediaCanPlay"
      @onPlayerProgressChanged="onPlayerProgressChanged"
      @onPlayerDurationChanged="onPlayerDurationChanged"
      @onPlayerInitialized="onPlayerInitialized"
      @onPlayerPlayMediaSourceList="onPlayerPlayMediaSourceList"
      @onPlayerPlayMediaSource="onPlayerPlayMediaSource"
      @onPlayerNoMediaSourceCanPlay="onPlayerNoMediaSourceCanPlay"
      @onPlayerViewChanged="onPlayerViewChanged"
      @onPlayerViewSizeChanged="onPlayerViewSizeChanged"
      @onPlayerViewClickable="onPlayerViewClickable"
      @onPlayerInfo="onPlayerInfo"
      @onPlayerError="onPlayerError"
      @onPlayerPreparing="onPlayerPreparing"
      @onPlayerPrepared="onPlayerPrepared"
      @onPlayerPlaying="onPlayerPlaying"
      @onPlayerPaused="onPlayerPaused"
      @onPlayerResumed="onPlayerResumed"
      @onPlayerStopped="onPlayerStopped"
      @onPlayerCompleted="onPlayerCompleted"
      @onPlayerBufferStart="onPlayerBufferStart"
      @onPlayerBufferEnd="onPlayerBufferEnd"
      @onPlayerSeekStart="onPlayerSeekStart"
      @onPlayerSeekCompleted="onPlayerSeekCompleted"
      @onPlayerLeftVolumeChanged="onPlayerLeftVolumeChanged"
      @onPlayerRightVolumeChanged="onPlayerRightVolumeChanged"
      @onPlayerVolumeChanged="onPlayerVolumeChanged"
      @onPlayerDefinitionListChanged="onPlayerDefinitionListChanged"
      @onPlayerDefinitionChanged="onPlayerDefinitionChanged"
      @onPlayerDecodeListChanged="onPlayerDecodeListChanged"
      @onPlayerDecodeChanged="onPlayerDecodeChanged"
      @onPlayerPlayRateListChanged="onPlayerPlayRateListChanged"
      @onPlayerPlayRateChanged="onPlayerPlayRateChanged"
      @onPlayerAspectRatioListChanged="onPlayerAspectRatioListChanged"
      @onPlayerAspectRatioChanged="onPlayerAspectRatioChanged"
      @onPlayerRenderListChanged="onPlayerRenderListChanged"
      @onPlayerRenderChanged="onPlayerRenderChanged"
      @onPlayerPlayMediaListModeListChanged="onPlayerPlayMediaListModeListChanged"
      @onPlayerPlayMediaListModeChanged="onPlayerPlayMediaListModeChanged"
      @onPlayerPlayMediaSourceListModeListChanged="onPlayerPlayMediaSourceListModeListChanged"
      @onPlayerPlayMediaSourceListModeChanged="onPlayerPlayMediaSourceListModeChanged"
      @onPlayerWindowTypeChanged="onPlayerWindowTypeChanged"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放" @onButtonClicked="onPlayButtonClicked"/>
      <s-text-button text="开始" @onButtonClicked="onStartButtonClicked"/>
      <s-text-button text="暂停" @onButtonClicked="onPauseButtonClicked"/>
      <s-text-button text="停止" @onButtonClicked="onStopButtonClicked"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {ref, markRaw} from "vue";
import {
  ESMediaSource,
  ESMediaSourceList,
  ESPlayerAspectRatio,
  ESPlayerDecode,
  ESPlayerDefinition,
  ESPlayerError,
  ESPlayerInfo, ESPlayerInterceptError,
  ESPlayerInterceptResult, ESPlayerLogLevel, ESPlayerPlayMode,
  ESPlayerRate, ESPlayerRender, ESPlayerWindowType,
  useESPlayerLog
} from "@extscreen/es3-player";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESPlayerManager,
  ESMediaItemList
} from "@extscreen/es3-player-manager";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '播放事件监听',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESPlayerLog()
    const playerManager = ref<ESIPlayerManager>()
    const playerWidth = 1920
    const playerHeight = 1080

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    const onPlayButtonClicked = () => {
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        playerType: 1,
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
      log.e(TAG, "-------onESCreate-----END----->>>>>")
    }

    const onStartButtonClicked = () => {
      playerManager.value?.start(0)
    }

    const onPauseButtonClicked = () => {
      playerManager.value?.pause()
    }

    const onStopButtonClicked = () => {
      playerManager.value?.stop()
    }

    const onPlayerPlayMediaList = (playList: ESMediaItemList) => {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaList------------->>>>', playList)
      }
    }

    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMedia------------->>>>', mediaItem)
      }
    }
    const onPlayerNoMediaCanPlay = (next: boolean) => {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerNoMediaCanPlay------------->>>>', next)
      }
    }

    function onPlayerProgressChanged(progress): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerProgressChanged------------->>>>', progress)
      }
    }

    function onPlayerDurationChanged(duration): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerDurationChanged------------->>>>', duration)
      }
    }

    function onPlayerInitialized(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerInitialized------------->>>>')
      }
    }

    function onPlayerPlayMediaSource(mediaSource: ESMediaSource): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaSource------------->>>>', mediaSource)
      }
    }

    function onPlayerPlayMediaSourceList(mediaSourceList: ESMediaSourceList): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaSourceList------------->>>>', mediaSourceList)
      }
    }

    function onPlayerInterceptSuccess(result: ESPlayerInterceptResult): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerInterceptSuccess------------->>>>', result)
      }
    }

    function onPlayerInterceptError(result: ESPlayerInterceptError): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerInterceptError------------->>>>', result)
      }
    }

    function onPlayerNoMediaSourceCanPlay(next: boolean): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerNoMediaSourceCanPlay------------->>>>', next)
      }
    }

    function onPlayerViewChanged(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerViewChanged------------->>>>')
      }
    }

    function onPlayerViewSizeChanged(playerWidth: number, playerHeight: number): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerViewSizeChanged------------->>>>playerWidth:' + playerWidth + "   playerHeight:" + playerHeight)
      }
    }

    function onPlayerViewClickable(playerClickable: boolean): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerViewClickable------------->>>>', playerClickable)
      }
    }

    function onPlayerInfo(info: ESPlayerInfo): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerInfo------------->>>>', info)
      }
    }

    function onPlayerError(error: ESPlayerError): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerError------------->>>>', error)
      }
    }

    function onPlayerPreparing(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPreparing------------->>>>')
      }
    }

    function onPlayerPrepared(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPrepared------------->>>>')
      }
    }

    function onPlayerPlaying(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlaying------------->>>>')
      }
    }

    function onPlayerPaused(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPaused------------->>>>')
      }
    }

    function onPlayerResumed(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerResumed------------->>>>')
      }
    }

    function onPlayerStopped(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerStopped------------->>>>')
      }
    }

    function onPlayerCompleted(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerCompleted------------->>>>')
      }
    }

    function onPlayerBufferStart(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerBufferStart------------->>>>')
      }
    }

    function onPlayerBufferEnd(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerBufferEnd------------->>>>')
      }
    }

    function onPlayerSeekStart(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerSeekStart------------->>>>')
      }
    }

    function onPlayerSeekCompleted(): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerSeekCompleted------------->>>>')
      }
    }

    function onPlayerLeftVolumeChanged(volume: number): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerLeftVolumeChanged------------->>>>', volume)
      }
    }

    function onPlayerRightVolumeChanged(volume: number): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerRightVolumeChanged------------->>>>', volume)
      }
    }

    function onPlayerVolumeChanged(leftVolume: number, rightVolume: number): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerVolumeChanged------------->>>>leftVolume:' + leftVolume + "   rightVolume:" + rightVolume)
      }
    }

    function onPlayerDefinitionListChanged(definitionList: Array<ESPlayerDefinition>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerDefinitionListChanged------------->>>>', definitionList)
      }
    }

    function onPlayerDefinitionChanged(definition: ESPlayerDefinition): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerDefinitionChanged------------->>>>', definition)
      }
    }

    function onPlayerDecodeListChanged(decodeList: Array<ESPlayerDecode>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerDecodeListChanged------------->>>>', decodeList)
      }
    }

    function onPlayerDecodeChanged(decode: ESPlayerDecode): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerDecodeChanged------------->>>>', decode)
      }
    }

    function onPlayerPlayRateListChanged(rateList: Array<ESPlayerRate>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayRateListChanged------------->>>>', rateList)
      }
    }

    function onPlayerPlayRateChanged(rate: ESPlayerRate): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayRateChanged------------->>>>', rate)
      }
    }

    function onPlayerAspectRatioListChanged(aspectRatioList: Array<ESPlayerAspectRatio>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerAspectRatioListChanged------------->>>>', aspectRatioList)
      }
    }

    function onPlayerAspectRatioChanged(aspectRatio: ESPlayerAspectRatio): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerAspectRatioChanged------------->>>>', aspectRatio)
      }
    }

    function onPlayerRenderListChanged(renderList: Array<ESPlayerRender>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerRenderListChanged------------->>>>', renderList)
      }
    }

    function onPlayerRenderChanged(render: ESPlayerRender): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerRenderChanged------------->>>>', render)
      }
    }

    function onPlayerPlayMediaListModeListChanged(playModeList: Array<ESPlayerPlayMode>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaListModeListChanged------------->>>>', playModeList)
      }
    }

    function onPlayerPlayMediaListModeChanged(playMode: ESPlayerPlayMode): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaListModeChanged------------->>>>', playMode)
      }
    }

    function onPlayerPlayMediaSourceListModeListChanged(playModeList: Array<ESPlayerPlayMode>): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaSourceListModeListChanged------------->>>>', playModeList)
      }
    }

    function onPlayerPlayMediaSourceListModeChanged(playMode: ESPlayerPlayMode): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaSourceListModeChanged------------->>>>', playMode)
      }
    }

    function onPlayerWindowTypeChanged(windowType: ESPlayerWindowType): void {
      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerWindowTypeChanged------------->>>>', windowType)
      }
    }

    const onESCreate = (params) => {
      log.e(TAG, "-------onESCreate---------->>>>>")
    }

    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      playerManager.value?.resume()
    }

    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      playerManager.value?.stop()
    }

    const onESStop = () => {
      log.e(TAG, "-------onESStop---------->>>>>")
    }

    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onPlayButtonClicked,
      onPauseButtonClicked,
      onStartButtonClicked,
      onStopButtonClicked,
      onESCreate,
      onESResume,
      onESPause,
      onESStop,
      onESDestroy,
      playerListRef,
      playerWidth,
      playerHeight,
      playerManager,
      onPlayerPlayMediaList,
      onPlayerPlayMedia,
      onPlayerNoMediaCanPlay,
      onPlayerError,
      onPlayerProgressChanged,
      onPlayerDurationChanged,
      onPlayerInitialized,
      onPlayerPlayMediaSource,
      onPlayerPlayMediaSourceList,
      onPlayerInterceptSuccess,
      onPlayerInterceptError,
      onPlayerNoMediaSourceCanPlay,
      onPlayerViewChanged,
      onPlayerViewSizeChanged,
      onPlayerViewClickable,
      onPlayerInfo,
      onPlayerPreparing,
      onPlayerPrepared,
      onPlayerPlaying,
      onPlayerPaused,
      onPlayerResumed,
      onPlayerStopped,
      onPlayerCompleted,
      onPlayerBufferStart,
      onPlayerBufferEnd,
      onPlayerSeekStart,
      onPlayerSeekCompleted,
      onPlayerLeftVolumeChanged,
      onPlayerRightVolumeChanged,
      onPlayerVolumeChanged,
      onPlayerDefinitionListChanged,
      onPlayerDefinitionChanged,
      onPlayerDecodeListChanged,
      onPlayerDecodeChanged,
      onPlayerPlayRateListChanged,
      onPlayerPlayRateChanged,
      onPlayerAspectRatioListChanged,
      onPlayerAspectRatioChanged,
      onPlayerRenderListChanged,
      onPlayerRenderChanged,
      onPlayerPlayMediaListModeListChanged,
      onPlayerPlayMediaListModeChanged,
      onPlayerPlayMediaSourceListModeListChanged,
      onPlayerPlayMediaSourceListModeChanged,
      onPlayerWindowTypeChanged
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

全局监听播放事件 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager,
  useESPlayerManagerEventManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {createESPlayerManagerEventListener} from "./event/ESPlayerManagerEvent";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '全局监听PlayerManager事件',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    //全局监听播放事件
    const playerManagerEventListener = createESPlayerManagerEventListener()
    const playerManagerEventManager = useESPlayerManagerEventManager()
    playerManagerEventManager.addListener(playerManagerEventListener)

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

MediaItemList拦截器 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {useESPlayerInterceptorManager} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";

import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {createESPlayerMediaItemListInterceptor} from "./interceptor/ESPlayerMediaItemListInterceptor";
import {createESPlayerMediaItemListGlobalInterceptor} from "./interceptor/ESPlayerMediaItemListGlobalInterceptor";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

/**
 * 优先执行，全局拦截器
 * 其次再执行局部拦截器
 */
export default defineComponent({
  name: 'MediaItemList拦截器',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    //优先执行，全局拦截器
    const globalInterceptorManager = useESPlayerInterceptorManager()
    const globalInterceptor = createESPlayerMediaItemListGlobalInterceptor()
    globalInterceptorManager.addInterceptor(globalInterceptor)

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      //其次再执行局部拦截器
      const interceptor = createESPlayerMediaItemListInterceptor()
      let playList: ESMediaItemList = {
        index: 0,
        list: [],
        interceptors: [interceptor]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

MediaItem拦截器 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {useESPlayerInterceptorManager} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {createESPlayerMediaItemGlobalInterceptor} from "./interceptor/ESPlayerMediaItemGlobalInterceptor";
import {createESPlayerMediaItemInterceptor} from "./interceptor/ESPlayerMediaItemInterceptor";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

/**
 * 优先执行，全局拦截器
 * 其次再执行局部拦截器
 */
export default defineComponent({
  name: 'MediaItem拦截器',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    //优先执行，全局拦截器
    const globalInterceptorManager = useESPlayerInterceptorManager()
    const globalInterceptor = createESPlayerMediaItemGlobalInterceptor()
    globalInterceptorManager.addInterceptor(globalInterceptor)

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      //其次再执行局部拦截器
      const interceptor = createESPlayerMediaItemInterceptor()
      let mediaItem: ESMediaItem = {
        interceptors: [interceptor]//添加拦截器
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem],
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }
    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

MediaSourceList拦截器 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSourceList, useESPlayerInterceptorManager} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {createESPlayerMediaSourceListGlobalInterceptor} from "./interceptor/ESPlayerMediaSourceListGlobalInterceptor";
import {createESPlayerMediaSourceListInterceptor} from "./interceptor/ESPlayerMediaSourceListInterceptor";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

/**
 * 优先执行，全局拦截器
 * 其次再执行局部拦截器
 */
export default defineComponent({
  name: 'MediaSourceList拦截器',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    //优先执行，全局拦截器
    const globalInterceptorManager = useESPlayerInterceptorManager()
    const globalInterceptor = createESPlayerMediaSourceListGlobalInterceptor()
    globalInterceptorManager.addInterceptor(globalInterceptor)

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      //其次再执行局部拦截器
      const interceptor = createESPlayerMediaSourceListInterceptor()
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [],
        interceptors: [interceptor]
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem],
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }
    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

MediaSource拦截器 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList, useESPlayerInterceptorManager} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {createESPlayerMediaSourceInterceptor} from "./interceptor/ESPlayerMediaSourceInterceptor";
import {createESPlayerMediaSourceGlobalInterceptor} from "./interceptor/ESPlayerMediaSourceGlobalInterceptor";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

/**
 * 优先执行，全局拦截器
 * 其次再执行局部拦截器
 */
export default defineComponent({
  name: 'MediaSource拦截器',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    //优先执行，全局拦截器
    const globalInterceptorManager = useESPlayerInterceptorManager()
    const globalInterceptor = createESPlayerMediaSourceGlobalInterceptor()
    globalInterceptorManager.addInterceptor(globalInterceptor)

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      //其次再执行局部拦截器
      const interceptor = createESPlayerMediaSourceInterceptor()

      let mediaSource: ESMediaSource = {
        interceptors: [interceptor],
        uri: null
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource],
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem],
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }
    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

播放模式 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerPlayMediaListModeListChanged="onPlayerPlayMediaListModeListChanged"
      @onPlayerPlayMediaListModeChanged="onPlayerPlayMediaListModeChanged"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <span class="es-player-manager-text-css" text="播放模式列表："/>
      <span class="es-player-manager-text-css" :text="playMediaListModeList + '' "/>
      <span class="es-player-manager-text-css" text="播放模式："/>
      <span class="es-player-manager-text-css" :text="playMediaListMode + '' "/>
      <span class="es-player-manager-text-css" text="          "/>
      <span class="es-player-manager-text-css" text="播放索引："/>
      <span class="es-player-manager-text-css" :text="playingMediaIndex + '' "/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放上一集" @onButtonClicked="playPreviousMedia"/>
      <s-text-button text="播放下一集" @onButtonClicked="playNextMedia"/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="单次播放" @onButtonClicked="setPlayModeOnce"/>
      <s-text-button text="顺序播放" @onButtonClicked="setPlayModeOrder"/>
      <s-text-button text="随机播放" @onButtonClicked="setPlayModeShuffle"/>
      <s-text-button text="单曲循环" @onButtonClicked="setPlayModeRepeat"/>
      <s-text-button text="循环播放" @onButtonClicked="setPlayModeLoop"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESPlayerPlayMode} from "@extscreen/es3-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '播放模式',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playMediaListModeList = ref([])
    const playMediaListMode = ref(0)
    const playingMediaIndex = ref(-1)

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function onPlayerPlayMedia(mediaItem: ESMediaItem) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
      }
      playingMediaIndex.value = playerManager.value?.getPlayingMediaIndex() ?? -1
    }

    function onPlayerPlayMediaListModeListChanged(playModeList: Array<ESPlayerPlayMode>): void {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMediaListModeListChanged---------->>>>>", playModeList)
      }
      playMediaListModeList.value = playModeList
    }

    function onPlayerPlayMediaListModeChanged(playMode: ESPlayerPlayMode): void {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMediaListModeChanged---------->>>>>", playMode)
      }
      playMediaListMode.value = playMode
    }

    function playPreviousMedia() {
      playerManager.value?.playPreviousMedia()
    }

    function playNextMedia() {
      playerManager.value?.playNextMedia()
    }

    function setPlayModeOnce() {
      playerManager.value?.setPlayMediaListMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_ONCE)
    }

    function setPlayModeOrder() {
      playerManager.value?.setPlayMediaListMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_ORDER)
    }

    function setPlayModeShuffle() {
      playerManager.value?.setPlayMediaListMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_SHUFFLE)
    }

    function setPlayModeRepeat() {
      playerManager.value?.setPlayMediaListMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_REPEAT)
    }

    function setPlayModeLoop() {
      playerManager.value?.setPlayMediaListMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_LOOP)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      let mediaItem_0: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4'
          }]
        },
      }
      let mediaItem_1: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
          }]
        },
      }

      let mediaItem_2: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/f4ccf8e2-0e58-4d36-ae2b-0555190ac340.mp4'
          }]
        },
      }

      let mediaItem_3: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4'
          }]
        },
      }

      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_0, mediaItem_1, mediaItem_2, mediaItem_3]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      playingMediaIndex,
      playMediaListModeList,
      playMediaListMode,
      playPreviousMedia,
      playNextMedia,
      setPlayModeOnce,
      setPlayModeOrder,
      setPlayModeShuffle,
      setPlayModeRepeat,
      setPlayModeLoop,
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onPlayerPlayMedia,
      onPlayerPlayMediaListModeListChanged,
      onPlayerPlayMediaListModeChanged
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}

.es-player-manager-text-css {
  color: white;
  font-size: 30px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>

画面比例 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerAspectRatioListChanged="onPlayerAspectRatioListChanged"
      @onPlayerAspectRatioChanged="onPlayerAspectRatioChanged"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <span class="es-player-manager-text-css" text="画面比例列表："/>
      <span class="es-player-manager-text-css" :text="aspectRatioList + '' "/>
      <span class="es-player-manager-text-css" text="画面比例："/>
      <span class="es-player-manager-text-css" :text="aspectRatio + '' "/>
      <span class="es-player-manager-text-css" text="          "/>
      <span class="es-player-manager-text-css" text="播放索引："/>
      <span class="es-player-manager-text-css" :text="playingMediaIndex + '' "/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放上一集" @onButtonClicked="playPreviousMedia"/>
      <s-text-button text="播放下一集" @onButtonClicked="playNextMedia"/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="FIT_PARENT" @onButtonClicked="setAspectRatioFitParent"/>
      <s-text-button text="FILL_PARENT" @onButtonClicked="setAspectRatioFillParent"/>
      <s-text-button text="WRAP_CONTENT" @onButtonClicked="setAspectRatioWrapContent"/>
      <s-text-button text="MATCH_PARENT" @onButtonClicked="setAspectRatioMatchParent"/>
      <s-text-button text="16_9_FIT_PARENT" @onButtonClicked="setAspectRatio169FitParent"/>
      <s-text-button text="4_3_FIT_PARENT" @onButtonClicked="setAspectRatio43FitParent"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESPlayerAspectRatio, ESPlayerPlayMode} from "@extscreen/es3-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '画面比例',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const aspectRatioList = ref([])
    const aspectRatio = ref('')

    const playingMediaIndex = ref(-1)

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function onPlayerPlayMedia(mediaItem: ESMediaItem) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
      }
      playingMediaIndex.value = playerManager.value?.getPlayingMediaIndex() ?? -1
    }

    function onPlayerAspectRatioListChanged(list: Array<ESPlayerAspectRatio>): void {
      aspectRatioList.value = list
    }

    function onPlayerAspectRatioChanged(ar: ESPlayerAspectRatio): void {
      switch (ar) {
        case ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_FIT_PARENT:
          aspectRatio.value = 'FIT_PARENT';
          break
        case ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_FILL_PARENT:
          aspectRatio.value = 'FILL_PARENT';
          break
        case ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_WRAP_CONTENT:
          aspectRatio.value = 'WRAP_CONTENT';
          break
        case ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_MATCH_PARENT:
          aspectRatio.value = 'MATCH_PARENT';
          break
        case ESPlayerAspectRatio.ES_PLAYER_AR_16_9_FIT_PARENT:
          aspectRatio.value = '16_9_FIT_PARENT';
          break
        case ESPlayerAspectRatio.ES_PLAYER_AR_4_3_FIT_PARENT:
          aspectRatio.value = '4_3_FIT_PARENT';
          break
      }
    }

    function playPreviousMedia() {
      playerManager.value?.playPreviousMedia()
    }

    function playNextMedia() {
      playerManager.value?.playNextMedia()
    }

    //
    function setAspectRatioFitParent() {
      playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_FIT_PARENT)
    }

    function setAspectRatioFillParent() {
      playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_FILL_PARENT)
    }

    function setAspectRatioWrapContent() {
      playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_WRAP_CONTENT)
    }

    function setAspectRatioMatchParent() {
      playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_MATCH_PARENT)
    }

    function setAspectRatio169FitParent() {
      playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_16_9_FIT_PARENT)
    }

    function setAspectRatio43FitParent() {
      playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_4_3_FIT_PARENT)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      let mediaItem_0: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4'
          }]
        },
      }
      let mediaItem_1: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4'
          }]
        },
      }

      let mediaItem_2: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4'
          }]
        },
      }

      let mediaItem_3: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4'
          }]
        },
      }

      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_0, mediaItem_1, mediaItem_2, mediaItem_3]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      playingMediaIndex,
      aspectRatioList,
      aspectRatio,
      playPreviousMedia,
      playNextMedia,
      setAspectRatioFitParent,
      setAspectRatioFillParent,
      setAspectRatioWrapContent,
      setAspectRatioMatchParent,
      setAspectRatio169FitParent,
      setAspectRatio43FitParent,
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onPlayerPlayMedia,
      onPlayerAspectRatioListChanged,
      onPlayerAspectRatioChanged,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}

.es-player-manager-text-css {
  color: white;
  font-size: 30px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>

清晰度 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerDefinitionListChanged="onPlayerDefinitionListChanged"
      @onPlayerDefinitionChanged="onPlayerDefinitionChanged"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <span class="es-player-manager-text-css" text="清晰度列表："/>
      <span class="es-player-manager-text-css" :text="definitionList + '' "/>
      <span class="es-player-manager-text-css" text="清晰度："/>
      <span class="es-player-manager-text-css" :text="definition + '' "/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="SD" @onButtonClicked="setDefinitionSD"/>
      <s-text-button text="HD" @onButtonClicked="setDefinitionHD"/>
      <s-text-button text="FULL_HD" @onButtonClicked="setDefinitionFHD"/>
      <s-text-button text="FOURK" @onButtonClicked="setDefinitionFOURK"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESPlayerDefinition} from "@extscreen/es3-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '画面比例',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const definitionList = ref([])
    const definition = ref(-1)

    const playingMediaIndex = ref(-1)

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function onPlayerPlayMedia(mediaItem: ESMediaItem) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
      }
      playingMediaIndex.value = playerManager.value?.getPlayingMediaIndex() ?? -1
    }

    function onPlayerDefinitionListChanged(list: Array<ESPlayerDefinition>): void {
      log.e(TAG, "-------onPlayerDefinitionListChanged---------->>>>>", list)
      definitionList.value = list
    }

    function onPlayerDefinitionChanged(d: ESPlayerDefinition): void {
      log.e(TAG, "-------onPlayerDefinitionChanged---------->>>>>", d)
      definition.value = d;
    }

    //
    function setDefinitionSD() {
      playerManager.value?.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_SD)
    }

    function setDefinitionHD() {
      playerManager.value?.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_HD)
    }

    function setDefinitionFHD() {
      playerManager.value?.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_FULL_HD)
    }

    function setDefinitionFOURK() {
      playerManager.value?.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_FOURK)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      let mediaItem_0: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_SD,
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4'
          },
            {
              definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_HD,
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4'
            },
            {
              definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_FULL_HD,
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4'
            },
            {
              definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_FOURK,
              uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4'
            }]
        },
      }

      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_0]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      playingMediaIndex,
      definitionList,
      definition,
      setDefinitionSD,
      setDefinitionHD,
      setDefinitionFHD,
      setDefinitionFOURK,
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onPlayerPlayMedia,
      onPlayerDefinitionListChanged,
      onPlayerDefinitionChanged,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}

.es-player-manager-text-css {
  color: white;
  font-size: 30px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>

解码方式 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerDecodeListChanged="onPlayerDecodeListChanged"
      @onPlayerDecodeChanged="onPlayerDecodeChanged"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <span class="es-player-manager-text-css" text="解码方式列表："/>
      <span class="es-player-manager-text-css" :text="decodeList + '' "/>
      <span class="es-player-manager-text-css" text="解码方式："/>
      <span class="es-player-manager-text-css" :text="decode + '' "/>
      <span class="es-player-manager-text-css" text="          "/>
      <span class="es-player-manager-text-css" text="播放索引："/>
      <span class="es-player-manager-text-css" :text="playingMediaIndex + '' "/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放上一集" @onButtonClicked="playPreviousMedia"/>
      <s-text-button text="播放下一集" @onButtonClicked="playNextMedia"/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="硬解码" @onButtonClicked="setHardwareDecode"/>
      <s-text-button text="软解码" @onButtonClicked="setSoftwareDecode"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESPlayerDecode} from "@extscreen/es3-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '解码方式',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const decodeList = ref([])
    const decode = ref('')

    const playingMediaIndex = ref(-1)

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function onPlayerPlayMedia(mediaItem: ESMediaItem) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
      }
      playingMediaIndex.value = playerManager.value?.getPlayingMediaIndex() ?? -1
    }

    function onPlayerDecodeListChanged(list: Array<ESPlayerDecode>): void {
      decodeList.value = list
    }

    function onPlayerDecodeChanged(d: ESPlayerDecode): void {
      switch (d) {
        case ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE:
          decode.value = '硬解码';
          break
        case ESPlayerDecode.ES_PLAYER_DECODE_SOFTWARE:
          decode.value = '软解码';
          break
      }
    }

    function playPreviousMedia() {
      playerManager.value?.playPreviousMedia()
    }

    function playNextMedia() {
      playerManager.value?.playNextMedia()
    }

    //
    function setHardwareDecode() {
      playerManager.value?.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE)
    }

    function setSoftwareDecode() {
      playerManager.value?.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_SOFTWARE)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      let mediaItem_0: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4'
          }]
        },
      }
      let mediaItem_1: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4'
          }]
        },
      }

      let mediaItem_2: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4'
          }]
        },
      }

      let mediaItem_3: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4'
          }]
        },
      }

      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_0, mediaItem_1, mediaItem_2, mediaItem_3]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      playingMediaIndex,
      decodeList,
      decode,
      playPreviousMedia,
      playNextMedia,
      setHardwareDecode,
      setSoftwareDecode,
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onPlayerPlayMedia,
      onPlayerDecodeListChanged,
      onPlayerDecodeChanged,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}

.es-player-manager-text-css {
  color: white;
  font-size: 30px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>

播放倍速 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerPlayRateListChanged="onPlayerPlayRateListChanged"
      @onPlayerPlayRateChanged="onPlayerPlayRateChanged"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <span class="es-player-manager-text-css" text="播放倍速列表："/>
      <span class="es-player-manager-text-css" :text="playRateList + '' "/>
      <span class="es-player-manager-text-css" text="播放倍速："/>
      <span class="es-player-manager-text-css" :text="playRate + '' "/>
      <span class="es-player-manager-text-css" text="          "/>
      <span class="es-player-manager-text-css" text="播放索引："/>
      <span class="es-player-manager-text-css" :text="playingMediaIndex + '' "/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放上一集" @onButtonClicked="playPreviousMedia"/>
      <s-text-button text="播放下一集" @onButtonClicked="playNextMedia"/>
    </div>
    <div class="es-sdk-content-row-css">
      <s-text-button text="0.5X播放" @onButtonClicked="setPlayRate_0_5"/>
      <s-text-button text="0.75X播放" @onButtonClicked="setPlayRate_0_75"/>
      <s-text-button text="1X播放" @onButtonClicked="setPlayRate_1"/>
      <s-text-button text="1.5X播放" @onButtonClicked="setPlayRate_1_5"/>
      <s-text-button text="2X播放" @onButtonClicked="setPlayRate_2"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESPlayerRate} from "@extscreen/es3-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '解码方式',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playRateList = ref([])
    const playRate = ref('')

    const playingMediaIndex = ref(-1)

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    function onPlayerPlayMedia(mediaItem: ESMediaItem) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
      }
      playingMediaIndex.value = playerManager.value?.getPlayingMediaIndex() ?? -1
    }

    function onPlayerPlayRateListChanged(playModeList: Array<ESPlayerRate>): void {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayRateListChanged---------->>>>>", playModeList)
      }
      playRateList.value = playModeList
    }

    function onPlayerPlayRateChanged(value: ESPlayerRate): void {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onPlayerPlayRateChanged---------->>>>>", value)
      }
      playRate.value = value
    }

    function playPreviousMedia() {
      playerManager.value?.playPreviousMedia()
    }

    function playNextMedia() {
      playerManager.value?.playNextMedia()
    }

    //
    function setPlayRate_0_5() {
      playerManager.value?.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_0_5)
    }

    function setPlayRate_0_75() {
      playerManager.value?.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_0_7_5)
    }

    function setPlayRate_1() {
      playerManager.value?.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_1)
    }

    function setPlayRate_1_5() {
      playerManager.value?.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_1_5)
    }

    function setPlayRate_2() {
      playerManager.value?.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_2)
    }

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false

      let mediaItem_0: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4'
          }]
        },
      }
      let mediaItem_1: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4'
          }]
        },
      }

      let mediaItem_2: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4'
          }]
        },
      }

      let mediaItem_3: ESMediaItem = {
        mediaSourceList: {
          index: 0,
          list: [{
            uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4'
          }]
        },
      }

      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_0, mediaItem_1, mediaItem_2, mediaItem_3]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      playingMediaIndex,
      playRateList,
      playRate,
      playPreviousMedia,
      playNextMedia,
      setPlayRate_0_5,
      setPlayRate_0_75,
      setPlayRate_1,
      setPlayRate_1_5,
      setPlayRate_2,
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onPlayerPlayMedia,
      onPlayerPlayRateListChanged,
      onPlayerPlayRateChanged,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}

.es-player-manager-text-css {
  color: white;
  font-size: 30px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>

前贴广告 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      :adPlayerList="adPlayerListRef"
      :adTest="true"
      adChannel="ch"
      :adDebug="true"
      class="es-video-player-manager-page-css"
      @onPlayerPlayList="onPlayerPlayList"
      @onPlayerError="onPlayerError"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
      @onPlayerInterceptError="onPlayerInterceptError"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放" @onButtonClicked="onPlayButtonClicked"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {ref, markRaw} from "vue";
import {
  ESMediaSource,
  ESMediaSourceList,
  ESPlayerError,
  ESPlayerInterceptError,
  ESPlayerInterceptResult,
  useESPlayerLog
} from "@extscreen/es3-player";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESPlayerManager,
  ESMediaItemList
} from "@extscreen/es3-player-manager";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESADPlayer, ESADType} from "@extscreen/es3-ad-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '前贴广告',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESPlayerLog()
    const playerManager = ref<ESIPlayerManager>()
    const playerWidth = 1920
    const playerHeight = 1080

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    const adPlayerList = [markRaw(ESADPlayer)]
    const adPlayerListRef = ref(adPlayerList)

    let isPaused = false

    const onPlayButtonClicked = () => {
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      //视频广告
      let adMediaSource: ESMediaSource = {
        uri: {
          id: 'extscreen-cast',
          mediaId: '1111',
          count: 1,
          type: ESADType.ES_AD_TYPE_LAUNCH,
        }
      }
      //前贴
      let previousRollADList: ESMediaSourceList = {
        index: 0,
        list: [adMediaSource],
        support: true
      }
      //视频
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }

      let mediaItem: ESMediaItem = {
        playerType: 1,
        mediaSourceList: mediaSourceList,
        previousRollADList: previousRollADList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }

    const onESCreate = (params) => {
      log.e(TAG, "-------onESCreate------START---->>>>>")
    }

    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    const onPlayerPlayList = (playList: ESMediaItemList) => {
      log.e(TAG, "-------onPlayerPlayList---------->>>>>", playList)
    }

    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
      log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
    }

    const onPlayerError = (error: ESPlayerError) => {
      log.e(TAG, "-------onPlayerError---------->>>>>", error)
    }

    const onPlayerInterceptSuccess = (result: ESPlayerInterceptResult) => {
      log.e(TAG, "-------onPlayerInterceptSuccess---------->>>>>", result)
    }

    const onPlayerInterceptError = (error: ESPlayerInterceptError) => {
      log.e(TAG, "-------onPlayerInterceptError---------->>>>>", error)
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      adPlayerListRef,
      playerWidth,
      playerHeight,
      playerManager,
      onPlayerPlayList,
      onPlayerPlayMedia,
      onPlayerError,
      onPlayerInterceptSuccess,
      onPlayerInterceptError,
      onPlayButtonClicked,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

后贴广告 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      :adPlayerList="adPlayerListRef"
      :adTest="true"
      adChannel="ch"
      :adDebug="true"
      class="es-video-player-manager-page-css"
      @onPlayerPlayList="onPlayerPlayList"
      @onPlayerError="onPlayerError"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
      @onPlayerInterceptError="onPlayerInterceptError"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="播放" @onButtonClicked="onPlayButtonClicked"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {ref, markRaw} from "vue";
import {
  ESMediaSource,
  ESMediaSourceList,
  ESPlayerError,
  ESPlayerInterceptError,
  ESPlayerInterceptResult,
  useESPlayerLog
} from "@extscreen/es3-player";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESPlayerManager,
  ESMediaItemList
} from "@extscreen/es3-player-manager";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import {ESADPlayer, ESADType} from "@extscreen/es3-ad-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '后贴广告',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESPlayerLog()
    const playerManager = ref<ESIPlayerManager>()
    const playerWidth = 1920
    const playerHeight = 1080

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    const adPlayerList = [markRaw(ESADPlayer)]
    const adPlayerListRef = ref(adPlayerList)

    let isPaused = false

    const onPlayButtonClicked = () => {
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/f4ccf8e2-0e58-4d36-ae2b-0555190ac340.mp4'
      }
      //视频广告
      let adMediaSource: ESMediaSource = {
        uri: {
          id: 'extscreen-cast',
          mediaId: '1111',
          count: 1,
          type: ESADType.ES_AD_TYPE_LAUNCH,
        }
      }

      //后贴
      let postRollADList: ESMediaSourceList = {
        index: 0,
        list: [adMediaSource],
        support: true
      }

      //视频
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }

      let mediaItem_1: ESMediaItem = {
        playerType: 1,
        mediaSourceList: mediaSourceList,
        postRollADList: postRollADList,
      }

      //----------------------------------------------------------
      let mediaSource_2: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4'
      }

      let mediaSourceList_2: ESMediaSourceList = {
        index: 0,
        list: [mediaSource_2]
      }
      let mediaItem_2: ESMediaItem = {
        playerType: 1,
        mediaSourceList: mediaSourceList_2,
      }
      //----------------------------------------------------------
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem_1, mediaItem_2]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }

    const onESCreate = (params) => {
      log.e(TAG, "-------onESCreate------START---->>>>>")
    }

    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    const onPlayerPlayList = (playList: ESMediaItemList) => {
      log.e(TAG, "-------onPlayerPlayList---------->>>>>", playList)
    }

    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
      log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem)
    }

    const onPlayerError = (error: ESPlayerError) => {
      log.e(TAG, "-------onPlayerError---------->>>>>", error)
    }

    const onPlayerInterceptSuccess = (result: ESPlayerInterceptResult) => {
      log.e(TAG, "-------onPlayerInterceptSuccess---------->>>>>", result)
    }

    const onPlayerInterceptError = (error: ESPlayerInterceptError) => {
      log.e(TAG, "-------onPlayerInterceptError---------->>>>>", error)
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      adPlayerListRef,
      playerWidth,
      playerHeight,
      playerManager,
      onPlayerPlayList,
      onPlayerPlayMedia,
      onPlayerError,
      onPlayerInterceptSuccess,
      onPlayerInterceptError,
      onPlayButtonClicked,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

自定义播放视图 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      :playerViewList="playerViewListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";
import ESPlayerManagerView from "./view/ESPlayerManagerView.vue";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '自定义播放视图',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    const playerViewList = [markRaw(ESPlayerManagerView)]
    const playerViewListRef = ref(playerViewList)

    let isPaused = false

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        mediaSourceList: mediaSourceList,
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: [mediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }
    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerViewListRef,
      playerManager,
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

多类型播放 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="上一个" @onButtonClicked="onPreviousButtonClicked"/>
      <s-text-button text="下一个" @onButtonClicked="onNextButtonClicked"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import ESTextLeftPlayer from "./player/ESTextLeftPlayer.vue";
import ESTextRightPlayer from "./player/ESTextRightPlayer.vue";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '多类型播放',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESTextLeftPlayer), markRaw(ESTextRightPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      //-----------------------------------------------------------------
      let leftMediaSource: ESMediaSource = {
        uri: '左文本'
      }
      let leftMediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [leftMediaSource]
      }
      let leftMediaItem: ESMediaItem = {
        mediaSourceList: leftMediaSourceList,
        playerType: 10
      }

      //-----------------------------------------------------------------
      let rightMediaSource: ESMediaSource = {
        uri: '右文本'
      }
      let rightMediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [rightMediaSource]
      }
      let rightMediaItem: ESMediaItem = {
        mediaSourceList: rightMediaSourceList,
        playerType: 11
      }
      //-----------------------------------------------------------------
      let playList: ESMediaItemList = {
        index: 0,
        list: [leftMediaItem, rightMediaItem]
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }

    const onNextButtonClicked = () => {
      playerManager.value?.playNextMedia()
    }
    const onPreviousButtonClicked = () => {
      playerManager.value?.playPreviousMedia()
    }

    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      onNextButtonClicked,
      onPreviousButtonClicked
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>

操作播放列表 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <es-player-manager
      ref="playerManager"
      :initPlayerWindowType="2"
      :playMediaAuto="false"
      :playerList="playerListRef"
      class="es-video-player-manager-page-css"
      @onPlayerPlayMediaList="onPlayerPlayMediaList"
      @onPlayerPlayMedia="onPlayerPlayMedia"
      @onPlayerNoMediaCanPlay="onPlayerNoMediaCanPlay"
      @onPlayerPlayMediaSource="onPlayerPlayMediaSource"
      @onPlayerNoMediaSourceCanPlay="onPlayerNoMediaSourceCanPlay"/>
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <s-text-button text="向前添加MediaItem" @onButtonClicked="addMediaToFirst"/>
      <s-text-button text="向后添加MediaItem" @onButtonClicked="addMediaToLast"/>
      <s-text-button text="指定位置添加MediaItem" @onButtonClicked="addMediaToIndex"/>
      <s-text-button text="替换MediaItem" @onButtonClicked="replaceMedia"/>
      <s-text-button text="重新设置播放列表" @onButtonClicked="playMediaList"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";

import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {
  ESIPlayerManager,
  ESMediaItem,
  ESMediaItemList,
  ESPlayerManager
} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESVideoPlayer} from "@extscreen/es3-video-player";

const TAG = 'ESVideoPlayerManagerPage'

export default defineComponent({
  name: '操作播放列表',
  components: {
    'es-player-manager': ESPlayerManager,
  },
  setup: function (props, context) {

    const log = useESLog()
    const playerManager = ref<ESIPlayerManager>()

    const playerList = [markRaw(ESVideoPlayer)]
    const playerListRef = ref(playerList)

    let isPaused = false

    let index = 10
    let firstIndex = 10

    //----------------------------------------------------------

    function buildMediaItemList(id: string): Array<ESMediaItem> {
      let mediaSource: ESMediaSource = {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4'
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      let mediaItem: ESMediaItem = {
        id: id,
        mediaSourceList: mediaSourceList,
      }
      const mediaItemList: Array<ESMediaItem> = [mediaItem]
      return mediaItemList
    }

    //----------------------------------------------------------
    const onESCreate = (params) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------onESCreate---------->>>>>")
      }
      isPaused = false
      let playList: ESMediaItemList = {
        index: 0,
        list: []
      }
      playerManager.value?.initialize()
      playerManager.value?.playMediaList(playList)
    }

    //---------------------------------------------------------------------
    function addMediaToFirst() {
      firstIndex--
      const itemList = buildMediaItemList(firstIndex + '')
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------addMediaToFirst---START------->>>>>", itemList)
      }
      playerManager.value?.addMediaToFirst(itemList)
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------addMediaToFirst---END------->>>>>", playerManager.value?.getMediaList())
      }
    }

    function addMediaToLast() {
      index++
      const itemList = buildMediaItemList(index + '')
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------addMediaToLast-----START----->>>>>", itemList)
      }
      playerManager.value?.addMediaToLast(itemList)
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------addMediaToLast------END---->>>>>", playerManager.value?.getMediaList())
      }
    }

    function addMediaToIndex() {
      const itemList = buildMediaItemList('3')
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------addMediaToIndex------START---->>>>>", itemList)
      }
      playerManager.value?.addMediaToIndex(1, itemList)
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------addMediaToIndex------END---->>>>>", playerManager.value?.getMediaList())
      }
    }

    function replaceMedia() {
      const itemList = buildMediaItemList('2000')
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------replaceMedia------START---->>>>>", itemList)
      }
      playerManager.value?.replaceMedia(0, itemList)
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------replaceMedia------END---->>>>>", playerManager.value?.getMediaList())
      }
    }

    function playMediaList() {
      const itemList = buildMediaItemList('5000')
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------playMediaList------START---->>>>>", itemList)
      }
      let playList: ESMediaItemList = {
        index: 0,
        list: itemList
      }
      playerManager.value?.playMediaList(playList)
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.e(TAG, "-------playMediaList------END---->>>>>", playerManager.value?.getMediaList())
      }
    }

    //---------------------------------------------------------------------
    const onPlayerPlayMediaList = (playList: ESMediaItemList) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaList------------->>>>', playList)
      }
    }

    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMedia------------->>>>', mediaItem)
      }
    }
    const onPlayerNoMediaCanPlay = (next: boolean) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerNoMediaCanPlay------------->>>>', next)
      }
    }

    function onPlayerPlayMediaSource(mediaSource: ESMediaSource): void {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerPlayMediaSource------------->>>>', mediaSource)
      }
    }

    function onPlayerNoMediaSourceCanPlay(next: boolean): void {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, '-----------onPlayerNoMediaSourceCanPlay------------->>>>', next)
      }
    }

    const onESResume = () => {
      log.e(TAG, "-------onESResume---------->>>>>")
      if (isPaused) {
        playerManager.value?.resume()
      }
      isPaused = false;
    }
    const onESPause = () => {
      log.e(TAG, "-------onESPause---------->>>>>")
      isPaused = true;
      playerManager.value?.stop()
    }
    const onESDestroy = () => {
      log.e(TAG, "-------onESDestroy---------->>>>>")
      playerManager.value?.release()
    }

    return {
      onESCreate,
      onESResume,
      onESPause,
      onESDestroy,
      playerListRef,
      playerManager,
      addMediaToFirst,
      addMediaToLast,
      addMediaToIndex,
      replaceMedia,
      playMediaList,
      onPlayerPlayMediaList,
      onPlayerPlayMedia,
      onPlayerNoMediaCanPlay,
      onPlayerPlayMediaSource,
      onPlayerNoMediaSourceCanPlay
    }
  },
});

</script>

<style>
.es-video-player-manager-page-css {
  position: absolute;
}
</style>