播放管理器 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
参数
无返回值:
返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 是否初始化。 | boolean | false |
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 | null | null |
getPlayingMediaSourceIndex
该方法用于获取正在播放的媒资资源的索引。
完整方法声明:function getPlayingMediaSourceIndex(): number
- 参数:
无
- 返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 媒资资源的索引 | number | -1 |
getPlayingMediaSourceList
该方法用于获取正在播放的媒资资源列表。
完整方法声明:function getPlayingMediaSourceList(): ESMediaSourceList | null
- 参数:
无
- 返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 媒资资源列表 | ESMediaSourceList | null | null |
getPlayingMediaSource
该方法用于获取正在播放的媒资资源。
完整方法声明:function getPlayingMediaSource(): ESMediaSource | null
- 参数:
无
- 返回值:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
无 | 正在播放的媒资资源 | ESMediaSource | null | null |
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 |
基础用法
点击查看源码
<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>
播放控制
点击查看源码
<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>
播放窗口切换
点击查看源码
<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>
播放起始位置
点击查看源码
<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>
播放尺寸切换
点击查看源码
<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>
自定义播放器
点击查看源码
<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>
播放事件页面监听
点击查看源码
<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>
全局监听播放事件
点击查看源码
<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拦截器
点击查看源码
<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拦截器
点击查看源码
<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拦截器
点击查看源码
<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拦截器
点击查看源码
<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>
播放模式
点击查看源码
<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>
画面比例
点击查看源码
<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>
清晰度
点击查看源码
<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>
解码方式
点击查看源码
<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>
播放倍速
点击查看源码
<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>
前贴广告
点击查看源码
<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>
后贴广告
点击查看源码
<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>
自定义播放视图
点击查看源码
<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>
多类型播放
点击查看源码
<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>
操作播放列表
点击查看源码
<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>