更新记录

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:

  1. 出现报错Uncaught SyntaxError:Identifier 'exports'has already been declared at app-view.js 意味着插件可能被使用在了普通vue文件中,未被uniapp特殊处理
  2. 出现uni_modules/czesou-exoplayer is not found TypeError:Cannot read property default'of undefined则是基座问题,这个问题出现在打包基座内未包含此插件,需重新打包基座,在未购买此插件时,请选择自定义调试包打包调试。
  3. 关于视频源问题,当未指定视频流媒体协议时,默认使用Progressive格式,支持类型如下image-20241104130821773
  4. 使用uni.navigateBack()此类方法进行页面返回时,请调用releasePlayer()进行资源释放(不进行资源释放可能会导致内存泄露,导致APP崩溃)
  5. 如果使用时出现切换页面导致应用崩溃,请参考上一条QA

隐私、权限声明

1. 本插件需要申请的系统权限列表:

网络访问权限(使用网络源进行播放时所需)

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问