更新记录

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 父页面的自定义方法名称 出现缓冲时触发回调事件

隐私、权限声明

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

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

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

许可协议

MIT协议

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