更新记录
1.3.0(2024-11-21)
添加自动调整画面横纵比
1.2.6(2024-11-20)
新增密度比值获取
1.2.5(2024-11-20)
添加播放器状态获取通道, 添加获取设备屏幕大小通道。
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.99,Android:4.4,iOS:不确定,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | √ | × | × | × | × | × | × | × |
使用说明
直接在需要使用本插件的组件(nvue)内编写本插件的组件标签,交流群:983067817
<uts-czesou-exoplayer></uts-czesou-exoplayer>
注意:此插件属于原生插件,需要使用原生渲染,故此需要在nvue中使用 ,使用组件时需要指定组件大小,使用方法:
<uts-czesou-exoplayer ref="helloView" style="width: 1280px; height: 720px;"></uts-czesou-exoplayer>
内部暴露API:
- releasePlayer :可主动调用此方法进行资源释放 使用示例:
this.$refs.[组件引用名称].releasePlayer();
函数声明:function releasePlayer()
- SwitchUrl :主动切换媒体源 使用示例:
this.$refs.[组件引用名称].SwitchUrl("http://xxxxxxxxx.m3u8","HLS");
函数声明:SwitchUrl(Url : string, MediaSourceType : String = "default")
- play:通过调用此方法进行媒体播放 使用示例:
this.$refs.[组件引用名称].play();
函数声明:function play()
- stop:通过调用此方法进行媒体播放暂停 使用示例:
this.$refs.[组件引用名称].stop();
函数声明:function stop()
- rewind:通过调用此方法进行回退操作,函数传参为回退毫秒数 使用示例:
this.$refs.[组件引用名称].rewind();
函数声明:function rewind(positionMs : Number)
- forward:通过调用此方法进行快进操作,函数传参为快进毫秒数 使用示例:
this.$refs.[组件引用名称].forward();
函数声明:function forward(positionMs : Number)
- getVidoeTotalTime:获取视频总时长 使用示例:
this.$refs.[组件引用名称].getVidoeTotalTime()
函数声明: function getVidoeTotalTime() : number
- getVideoPlayTime:获取视频播放时间点 使用示例:
this.$refs.[组件引用名称].getVideoPlayTime()
函数声明:function getVideoPlayTime() : number
- setVideoPlayTime:设置视频播放点时间(跳转)函数传参为跳转时间点毫秒数 使用示例
this.$refs.[组件引用名称].setVideoPlayTime(time)
函数声明:function setVideoPlayTime(time : number)
- setResizeMode:设置播放器画面缩放模式,参数说明:默认:
0
使用示例this.$refs.[组件引用名称].setResizeMode(ResizeMode)
0:宽度或高度将缩小,以适应目标宽高比(不裁剪视频,保持视频比例)。
1:宽度固定,高度根据目标宽高比进行调整。
2:高度固定,宽度根据目标宽高比进行调整。
3:忽略目标宽高比,视频将被拉伸以完全填满 `PlayerView`。
4:宽度或高度增加以匹配目标宽高比(会裁剪视频)。
函数声明:function setResizeMode(resizeMode : number)
- setRepeatMode:设置视频循环模式,参数说明:默认:
2
使用示例this.$refs.[组件引用名称].setRepeatMode(repeatMode)
0:循环播放整个播放列表。
1:单曲循环当前视频。
2:关闭循环模式(播放完后停止)。
函数声明:function setRepeatMode(repeatMode : number)
组件参数:
属性名 | 类型 | 默认值 | 可选项 |
---|---|---|---|
VideoUrl | String | ’‘ | any |
MediaSourceType | String | default | HLS |DASH|SmoothStreaming|Rtsp|Rtmp|Progressive |
ShowVideoController | Boolean | true | true | false |
媒体源更新:插件内置了媒体源自动更新,当VideoUrl的传递值变更时,插件内部自动切换至新的源地址(切换时请注意视频播放协议)
流媒体协议: 视频播放协议通过 MediaSourceType指定,默认使用渐进式媒体 ProgressiveMediaSource
可选播放控制器显示:通过指定ShowVideoController的值来控制是否可以呼出视频控制组件
内存使用相关:组件在页面取消挂载(页面卸载时)时自动暂停并释放播放组件,无需担心内存泄露问题,
如有插件相关问题,可发送邮件至yuanfangwa@foxmail.com
缓存信息:
播放状态:uni.getStorageSync('player_state')
通过同步缓存获取播放器当前状态
1:播放器处于空闲状态,这意味着它只拥有有限的资源。
2:播放器无法立即播放媒体,但正在努力实现播放媒体。当播放器需要缓冲更多数据才能开始播放时,通常会出现此状态。
3:玩家可以立即从当前位置开始游戏。如果 getPlayWhenReady() 为 true,则播放器将播放,否则将暂停播放。
4:播放器已完成媒体播放。
null or '':当前状态没有发生过改变,未初始化。
设备屏幕信息:uni.getStorageSync('driveScreenInfo')
通过同步缓存获取设备屏幕的宽度、高度、像素密度比值
width:当前设备的屏幕宽度。
height:当前设备的屏幕高度。
scaledDensity:当前设备的像素密度比值
QA:
- 出现报错
Uncaught SyntaxError:Identifier 'exports'has already been declared at app-view.js
意味着插件可能被使用在了普通vue文件中,未被uniapp特殊处理 - 出现
uni_modules/czesou-exoplayer is not found TypeError:Cannot read property default'of undefined
则是基座问题,这个问题出现在打包基座内未包含此插件,需重新打包基座,在未购买此插件时,请选择自定义调试包打包调试。 - 关于视频源问题,当未指定视频流媒体协议时,默认使用
Progressive
格式,支持类型如下 - 使用uni.navigateBack()此类方法进行页面返回时,请调用
releasePlayer()
进行资源释放(不进行资源释放可能会导致内存泄露,导致APP崩溃) - 如果使用时出现切换页面导致应用崩溃,请参考上一条QA