微信小程序联合视频播放器插件的使用

联合视频播放器插件开发文档

一、使用插件前,使用者要在 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(){
    // 视频播放完成
},

扫描二维码关注公众号,回复: 14746169 查看本文章

猜你喜欢

转载自blog.csdn.net/lovewangyage/article/details/126488945