更新记录
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文件请注意。
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
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 | 父页面的自定义方法名称 | 出现缓冲时触发回调事件 | 无 |