更新记录

1.1.0(2022-09-24)

  • 修复上次更新的bug
  • 去掉高版本编辑器报错

1.0.9(2022-09-23)

  • 优化判断浏览器是否能播放m3u8格式视频
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.13 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × ×

使用须知

  • 1、这个播放器是利用原生h5<video>标签来实现的,所以只支持app-vue、h5移动端和PC端
  • 2、这个插件依赖一些js库,直接进入插件根目录下使用npm install安装即可
  • 3、支持视频格式有ogg、mp4、webm、m3u8
  • 4、支持短视频播放模式
  • 5、支持弹幕功能

props属性

属性名 类型 默认值 可选值 说明 兼容性
dataId String [] 自定义 唯一id(创建多个播放器时传入)
playList Array [] 自定义 播放列表
options Object {} 自定义 配置列表
enableShort Boolean false true/false 开启短视频模式 app-vue,h5移动端

options播放配置

属性名 类型 默认值 可选值 说明 兼容性
autoplay Boolean false true/false 自动播放 ios端可能不支持
playMode String switch switch/loop/stop 播放模式:自动切集/循环播放/博望暂停
hotkey Boolean true true/false 热键控制(PC端通过键盘控制音量和进度,移动端通过滑动屏幕控制音量和进度) 非短视频模式
volume Number 1.0 自定义 音量
poster String '' 图片链接 默认封面
muted Boolean false true/false 静音
header Boolean true true/false 显示顶部
controls Boolean true true/false 显示控制栏
hideDuration Number 4000 自定义 不操作时,控制栏隐藏周期(单位:ms)
fullScreenDirection String landscape-primary auto/landscape-primary/portrait-primary/landscape-secondary/portrait-secondary 全屏时设备方向 app-vue
generallyDirection String portrait-primary auto/landscape-primary/portrait-primary/landscape-secondary/portrait-secondary 非全屏时设备方向 app-vue
enableDanmuku Boolean true true/false 弹幕功能
showDanmuku Boolean true true/false 展示弹幕
enableDanmukuInput Boolean true true/false 显示发送弹幕按钮
danmukuOpacity Number 0.5 自定义 弹幕透明度
danmuSize Array [{title: '小号',value: 18},{title: '中号',value: 24},{title: '大号',value: 30}] 自定义 弹幕大小列表
danmuColors Array ['#FFFFFF', '#e54256', '#ffe133', '#64DD17', '#39ccff', '#D500F9', '#222222', '#9B9B9B', '#019899'] 弹幕颜色列表
danmukuGap String Number 40 弹幕显示上下间距
enableBlurBg Boolean true true/false 开启模糊背景显示 短视频模式(有些机型可能不支持)
objectFit String contain contain/fill/cover/none 当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖,none:不处理

event事件

事件名 参数 说明 兼容性
canplay duration 进入可以播放状态,但不保证后面可以流畅播放,总长度可以从这里取到
play 播放事件
pause 暂停事件
stop 停止事件
ended 自然播放结束事件
error 播放错误事件
timeupdate currentTime 播放进度更新事件
waiting 加载中事件,当视频因为数据不足,需要停下来加载时会触发
playing 继续播放事件,当视频因为数据不足停下来成功加载到数据之后继续播放时触发
seeking currentTime 进行跳转进度操作事件
seeked currentTime 完成跳转进度操作事件
volumeChange volume 音量改变事件
rateChange rate 播放速率改变事件
resizeChange {direction: 方向, width: 设备宽度, height: 设备高度} 设备方向改变事件 app-vue,h5移动端
danmuSubmit danmu, callback 弹幕提交事件
currentChange 视频信息,callback({src: 播放链接, danmuku: 弹幕列表}) 视频切换事件
fullScreenChange fullScreen 全屏切换事件
slidetolower 滑动到底部事件 短视频模式

内置方法

方法名 参数 说明 兼容性
play 播放
pause 暂停
toggle 播放/暂停
seek 秒数 跳转位置(单位是s)
prev 切换上一集 非短视频模式
next 切换下一集 非短视频模式
drawDanmu danmu 实时绘制弹幕
showToast {title: 消息, duration: 周期} 内部提示框
switchTo id 切换指定视频 非短视频模式
switchFullScreen 开启/退出全屏
launchFullscreen 开启全屏
exitFullscreen 退出全屏
hideMenu 关闭所有打开的弹窗菜单

播放列表

属性名 类型 可选值 说明 兼容性
id String 视频的唯一标识
title String 视频标题
poster String 视频封面
src String 视频链接
danmuku Array 弹幕列表
formats String auto/m3u8/ogg/mp4/webm 视频格式

弹幕列表

属性名 类型 可选值 说明 兼容性
key String 弹幕的唯一标识
time Number 弹幕出现的时间(单位:毫秒)
text String 弹幕文本内容
fontSize Number 弹幕大小(单位:像素)
color String 弹幕颜色

插槽slots

名称 说明 兼容性
header 替换顶部内容 非短视频模式
controls 替换控制栏
custom 插入一些自定义内容(比如短视频的右侧菜单栏)

快速开始

    <!-- 引入播放器 -->
    <yingbing-video ref="video" :playList="playList"/>
// 添加播放列表
export default {
    data() {
        return {
            playList: [{
                id: 100001,
                title: '第一集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/001.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                },{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                }]
            },{
                id: 100002,
                title: '第二集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/002.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                }]
            },{
                id: 100003,
                title: '第三集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/003.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                }]
            }]
        }
    }
}

在currentChange中返回播放链接和弹幕

    <!-- 引入播放器 -->
    <yingbing-video ref="video" :playList="playList" @currentChange="onCurrentChange" />
export default {
    data() {
        return {
            playList: [{
                id: 100001,
                title: '第一集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg'
            },{
                id: 100002,
                title: '第二集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg'
            },{
                id: 100003,
                title: '第三集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg'
            }]
        }
    },
    methods: {
        onCurrentChange (video, callback) {
            //模拟请求事件
            setTimeout(() => {
                callback({
                    src: '/static/001.mp4',
                    danmuku: [{
                      key: 'fctc651a9pm2j20bia8j',
                      time: 1000,
                      text: '这是新增的一条弹幕',
                      fontSize: 24,
                      color: '#0ff',
                    },{
                      key: 'fctc651a9pm2j20bia8j',
                      time: 1000,
                      text: '这是新增的一条弹幕',
                      fontSize: 24,
                      color: '#0ff',
                    }]
                })
            }, 500)
        }
    }
}

播放配置

    <!-- 引入播放器 -->
    <yingbing-video ref="video" :playList="playList" :options="options" />
export default {
    data() {
        return {
            playList: [{
                id: 100001,
                title: '第一集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/001.mp4',
            }],
            options: {
                autoplay: true,//自动播放
                enableDanmuku: false,//关闭弹幕功能
                hotkey: false//关闭手势控制和键盘控制
            }
        }
    }
}

提交弹幕

    <!-- 引入播放器 -->
    <yingbing-video ref="video" :playList="playList" @danmuSubmit="onDanmuSubmit" />
export default {
    data() {
        return {
            playList: [{
                id: 100001,
                title: '第一集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/001.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                }]
            }]
        }
    },
    methods: {
        onDanmuSubmit (danmu, callback) {
            //模拟请求事件将弹幕上传到服务器
            setTimeout(() => {
                callback('success')//弹幕上传成功回调
                // callback('fail')//弹幕上传失败回调
            }, 500)
        }
    }
}

短视频模式

    <!-- 引入播放器 -->
    <yingbing-video
    ref="video"
    :enableShort="true"
    :playList="playList"
    :options="options"
    @slidetolower="onSlidetolower">
        <view slot="custom">右侧菜单栏</view>
    </yingbing-video>
export default {
    data() {
        return {
            playList: [{
                id: 100001,
                title: '第一集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/001.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                }]
            },{
                id: 100002,
                title: '第二集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/002.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                }]
            }],
            options: {
                autoplay: true//自动播放
            }
        }
    },
    methods: {
        //滑动到底部
        onSlidetolower () {
            //模拟请求事件
            setTimeout(() => {
                this.playList.push({
                id: 100003,
                title: '第三集',
                poster: 'https://rin.linovel.net/cover/106381_2bf19aaa268a443db60389fc31a9feac.jpg!min300jpg',
                src: '/static/003.mp4',
                danmuku: [{
                  key: 'fctc651a9pm2j20bia8j',
                  time: 1000,
                  text: '这是新增的一条弹幕',
                  fontSize: 24,
                  color: '#0ff',
                })
            }, 500)
        }
    }
}

隐私、权限声明

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

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

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

许可协议

MIT协议

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