一、使用插件前,使用者要在 app.json 中声明需要使用的插件:(使用Hbuilder开发时需要manifest.json源码视图里面添加)
二、在使用插件的页面-注册组件
components: {
"pb-video": "plugin://video-plugin/pb-video",
},
三、组件的使用
<pb-video :videoConf="videoConf" secret="secret" />
videoConf 视频默认属性如下:
videoConf: {
width: '750rpx', //视频的宽度,必须带px,或rpx
height: '100%', //视频的高度,可以带px或100%类似的高度设置
url: '', //播放url--String
controls: true, //是否显示默认播放控件
enableDanmu: true, //是否展示弹幕
autoplay: false, //是否自动播放
loop: false, //是否自动播放
muted: false, //是否静音播放
initialTime: false, //指定视频初始播放位置
showProgress: true, //是否显示进度条
showFullBtn: true, //是否显示全屏按钮
showPlayBtn: true, //是否显示底部控制栏的播放按钮
showCenterPlayBtn: false, //是否显示屏幕中间的播放按钮
enableProgressGesture: true, //是否开启控制进度的手势
objectFit: 'contain', //视频的表现形式 contain:包含,fill:填充,conver:覆盖
poster: '', //视频封面的图片网络资源地址,若controls属性值为false,则设置无效
ShowMuteBtn: false, //是否显示静音按钮
title: '', //视频标题,全屏时在顶部展示
playBtnPosition: 'bottom', //播放按钮的位置bottom/center
enablePlayGesture: false, //是否开启播放手势,即双击切换播放/暂停
autoPauseIfNavigate: true, //跳转小程序的其他页面时,是否自动暂停本页面视频播放
autoPauseIfOpenNative: true, //跳转到其他微信原生页面,是否自动暂停本页面视频播放
vslideGesture: false, //非全屏模式下,是否开启亮度与音量调节手势
vslideGestureInFull: true, //全屏模式下是否开启亮度与音量调节手势
showCastingBtn: false, //显示投屏按钮,只安卓且同层渲染下生效,支持DLNA协议
pictureMode: '', //设置小窗模式,push,pop,空字符或者数组模式设置多个模式 -- String/Array
enableAutoRotation: false, //是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效
showScreenLockBtn: false, //是否显示锁屏按钮
},
videoPause:function(){
//视频暂停;
},
timeupdate:function(res){
//视频播放进度;
},
videoOnPlay:function(res){
// 视频开始播放
},
videoEnded:function(){
// 视频播放完成
},