微信小程序 video 视频组件 + 弹幕发送功能完整案例

前言

本篇文章给大家带来微信小程序video视频组件的实战案例，实现视频播放、预加载弹幕、输入框自定义发送弹幕，并且每次发送弹幕自动生成随机颜色。适合小程序初学者学习 video 组件、VideoContext 弹幕 API、云存储视频资源加载。

开发环境：HBuilderX / 微信开发者工具 知识点：video 组件、danmuList 初始弹幕、VideoContext.sendDanmu、随机颜色生成、selectorQuery 获取视频上下文

效果预览

页面顶部自定义导航栏，中间 video 播放云存储视频，视频自带预置弹幕；下方输入框输入文字，点击发送按钮即可在视频上弹出随机颜色弹幕。

项目文件结构

pages/index/ ├─ index.wxml 页面结构 ├─ index.wxss 页面样式 ├─ index.js 逻辑、弹幕、随机颜色 └─ app.wxss 全局公共样式

1、index.wxml

2、index.wxss

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }

3、app.wxss（全局样式）

/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 4rpx solid #FF9500; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }

4、index.js（核心逻辑）

// index.js // 获取随机十六进制颜色 function getRandomColor() { let rgb = [] for (let index = 0; index < 3; index++) { let color = Math.floor(Math.random() * 256).toString(16) // 十六进制不足两位自动补0 color = color.length == 1 ? '0' + color : color rgb.push(color) } console.log(rgb); return '#' + rgb.join('') } Page({ data: { // 腾讯云开发CloudBase存储视频地址 videoPath: 'https://xxxx-1329983358.tcb.qcloud.la/video/%E5%8D%8E%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A2026.mp4?sign=013d83b58387df0ca7d70b4bb7037639&t=1792459117', // 初始弹幕列表 danmuList: [ { text: '鸿蒙世界，奔腾不息', color: '#ff0000', time: 1 }, { text: 'HarmonyOS 7', color: '#ff00ff', time: 5 }, { text: '华为开发者大会2026', color: '#00ff00', time: 10 }, { text: '携手助力，筑牢金融安全', color: '#00ffff', time: 20 } ] }, onLoad() { // 获取video上下文，用于发送弹幕API const query = wx.createSelectorQuery() query.select('#my-video').context() query.exec((res) => { if (res[0]) { this.videoCtx = res[0].context } }) }, // input失去焦点保存输入内容 inputBlur(e) { console.log(e); this.inputValue = e.detail.value }, // 发送弹幕 sendDanmu() { this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })

核心知识点讲解

1、video 组件关键属性

  • controls：显示原生播放控件（播放、暂停、进度条）
  • danmu-list：页面加载完成自动播放的预置弹幕数组
  • enable-danmu：开启弹幕功能（必须加，弹幕才能生效）
  • danmu-btn：显示自带弹幕开关按钮

2、弹幕对象格式

{ text: "弹幕文字", color: "#颜色值", time: 弹幕出现时间（单位：秒） }

3、VideoContext.sendDanmu

专门用于动态发送实时弹幕，不需要写进 danmuList，发送立刻在视频上弹出。

注意：必须先用createSelectorQuery拿到 video 实例上下文videoCtx，否则无法调用发送弹幕接口。

4、随机颜色函数

随机生成 RGB 三个 0~255 数字，转 16 进制，不足两位补 0，拼接成#xxxxxx格式颜色，每次发弹幕颜色不一样。

5、视频地址说明

示例视频存放在腾讯云开发 CloudBase 存储桶，tcb.qcloud.la是云开发默认域名；链接带sign签名和时间戳t，属于临时访问链接，签名过期视频无法播放，自己开发时替换成自己的视频链接即可。