更新记录
1.0.0(2023-06-20) 下载此版本
- 完成基础组件功能开发,列表会尝试自动解析视频时长 (手机端不支持)
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
说明
基于 uni.createVideoContext()
开发的视频播放控件,自带列表,可选择是否启用
uniapp 的原生 video 控件支持弹幕系统,所以也顺势做出来了,弹幕传入的格式为:
[{
text: '我来组成弹幕', // 弹幕内容
color: '#ffffff', // 字体颜色
time: 1 // 出现的时间戳 单位/秒
},
{
text: '怎么变色啊?',
color: '#ffffff',
time: 2
}
...
]
srcList
可传入视频信息对象,组件会尝试自动识别视频总长;
由于平台兼容问题,若您希望兼容手机端,需要为此额外手动传入 视频总长 time
的信息才可以在列表中显示播放时长
[{
src:'视频地址',
name:'视频名称',
time:'视频总长'
}]
播放列表仅在传入 srcList
时允许显示,传入 src
单个视频链接只做为基础播放控件
参数传入
参数名 | 默认值 | 说明 |
---|---|---|
src | '' | 传入的单个视频地址 |
srcList | [] | 要传入的多个视频信息 |
poster | (默认图片) | 视频的封面图片 |
height | (宽度的16:9) | 视频播放区域控件的高度 |
isDirectory | true | 是否展示播放列表 |
directoryHeight | (自适应) | 播放列表高度 |
isDanmu | false | 是否显示弹幕 (支持双向绑定) |
isDanmuBtn | false | 是否显示弹幕按钮 |
danmuColor | #ffffff | 弹幕颜色 |
danmuList | [] | 弹幕数据 |
videoIndex | 0 | 播放器播放的列表下标 |
autoNext | true | 自动播放下一个视频 |
事件向外
参数名 | 参数 | 说明 |
---|---|---|
sendDanmu | {color,text,time} | 用户发送弹幕时触发的事件 |
timeupdate | event | 播放器正在播放时触发的事件 |
ended | event | 视频播放结束时触发的事件 |
changeVideoIndex | event | 视频列表切换下标时触发 |
基础演示
弹幕系统的数据通常是搭配 @changeVideoIndex
事件,通过发起对应请求数据获得的
<template>
<view class="content">
<smm-video :srcList="srcList" :isDanmu.sync="isdanmu" :isDanmuBtn="isdanmuBtn"
:danmuList='danmuList'></smm-video>
</view>
</template>
<script>
export default {
data() {
return {
srcList: [{
src: '视频真实地址',
name: '视频名',
time: 314
}],
isdanmu: true,
isdanmuBtn: true,
danmuList: [{
text: '没有弹幕?',
color: '#ffffff',
time: 1
},
{
text: '呜呜呜',
color: '#ffffff',
time: 3
}]
}
}
}
</script>
<style>
.content {
width: 100%;
}
</style>