更新记录
1.1.3(2021-09-11)
1.【新增】视屏回调触发副业面时间如播放中触发事件、播放结束时触发事件等
1.1.2(2021-09-04)
1.【调整】css样式调整为直接在页面中写入,去掉外部引入的方式。\r\n
2.【调整】图片 调整路径base64的路径,不使用相对路径或绝对的路径。
调整的方向:提供开发的操作简便性,不用在去额外现在相关资源文件等信息。
1.1.1(2021-08-29)
1.【修复】进度条拖动不顺滑问题
2.【新增】进度条点击事件
3.【调整】底部播放栏样式播放按钮单独上移等若干问题
4.【调整】去除锁定播放界面功能(后续可能会考虑加上)
5.【减少】减少其他若干不重要属性和功能
6.【增加】增加视频相关设置事件方法
7.【优化】视频双加的其他bug
8.说明:原来的小程序视频播放器(慎用 ,仅供学习)已经不再维护 现在在原来的基础上进行了比较大的调整。小米unturl至尊版本测试过,其他手机微测试 (微信端)。
【重要说明】 插件的样式单独提出来了成了一个css文件请注意。
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用方法
1.在script中引用组件
import splayer from '../../components/shun-player/shun-player.vue'
export default {
components: { "shun-player": splayer},
data() {
return {
poster:"",
//poster:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/1ae87107-2943-4ba6-be2b-390ca27c6260.png",//封面
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
videoTitle: "自定义测试标题"
}
},
onLoad() {
},
onReady() {
/*设置视频初始播放时间*/
//this.$refs.splayer.setTime(30);
},
methods: {
getVideoInfo:function(){// 获取视频信息
var abc = this.$refs.splayer.getVideoInfo();
console.log(abc);
},
setvTime:function(){ //设置视频初始播放时间 单位:s
this.$refs.splayer.setTime(30);
},
play:function(){//播放
this.$refs.splayer.vPlay();
},
pause:function(){//暂停
this.$refs.splayer.vPause();
},
setSpeed:function(){//设置播放速度
this.$refs.splayer.setSpeed(2.0);
},
setSrc:function(){//设置播放路径
this.$refs.splayer.setSrc(this.src);
},
setPoster:function(){//设置封面
this.$refs.splayer.setPoster(this.poster);
},
setTitle:function(){//设置标题
this.$refs.splayer.setTitle("测试设置标题");
},
ExecutionEvent:function(t){
console.log(t);
}
}
}
2.在 template 中使用组件
<view class="">
<shun-player :src="src" :videoTitle="videoTitle" :poster="poster" ref="splayer" ></shun-player>
<view class="" @tap="getVideoInfo">获取视频信息</view>
<view class="" @tap="setvTime">设置视频时间为30s</view>
<view class="" @tap="play">播放</view>
<view class="" @tap="pause">暂停</view>
<view class="" @tap="setSpeed">设置播放速度 2.0</view>
<view class="" @tap="setSrc">设置视频路径</view>
<view class="" @tap="setPoster">设置视频封面</view>
<view class="" @tap="setTitle">设置视频标题</view>
</view>
说明
OBJECT参数说明
参数 |
类型 |
默认值 |
说明 |
src |
String |
'' |
视频路径 |
poster |
String |
'' |
视频封面 |
videoTitle |
String |
'' |
视频标题 |
OBJECT事件说明
名称 |
描述 |
示例 |
setSrc |
设置视频播放路径 |
this.$refs.splayer.setSrc(src); |
视频路径 |
setTime |
设置视频播放点单位:s |
this.$refs.splayer.setTime(30); |
setSpeed |
设置播放倍速 |
this.$refs.splayer.setSpeed(2.0); |
setPoster |
设置视频封面 |
this.$refs.splayer.setPoster(poster); |
setTitle |
设置视频标题 |
this.$refs.splayer.setTitle("测试设置标题"); |
setVideoInfo |
初始化视频信息 |
this.$refs.splayer.setVideoInfo({src:"",videoTitle:"",poster:"",rate:"",time:""}) |
getVideoInfo |
获取当前播放视频信息 |
this.$refs.splayer.getVideoInfo() |
vPlay |
播放 |
this.$refs.splayer.vPlay(); |
vPause |
暂停 |
this.$refs.splayer.vPause(); |
OBJECT 回调事件说明
子组件回去父页面传递的属性props传递的响应回调的事件名进行相应回调,返回相应信息(调用父页面方法)
属性示例:
event:{
playEvent:"ExecutionEvent",//播放触发事件 返回时间信息
endEvent:"EndEvent" ,//播放结束回调事件
// errorEvent:"errorEvent",//视频加载出现错误时回调事件 参数:错误信息
// waitinEvent:"waitinEvent"//视频缓冲时触发事件
}
调用组件时需要绑定事件监听 否则不触发 示例:
<shun-player :event="event" v-on:ExecutionEvent="ExecutionEvent" v-on:endEvent="endEvent"></shun-player>
属性对象 |
值 |
说明 |
回传信息 |
playEvent |
父页面的自定义方法名称 |
播放时触发回调事件 |
回传播放时间信息{currentTime: 81.272604, duration: 750.910113} |
endEvent |
父页面的自定义方法名称 |
播放结束时触发回调事件 |
无 |
errorEvent |
父页面的自定义方法名称 |
加载错误时触发回调事件 |
回传错误信息 |
waitinEvent |
父页面的自定义方法名称 |
出现缓冲时触发回调事件 |
无 |