前言本篇文章给大家带来微信小程序video视频组件的实战案例实现视频播放、预加载弹幕、输入框自定义发送弹幕并且每次发送弹幕自动生成随机颜色。适合小程序初学者学习 video 组件、VideoContext 弹幕 API、云存储视频资源加载。开发环境HBuilderX / 微信开发者工具 知识点video 组件、danmuList 初始弹幕、VideoContext.sendDanmu、随机颜色生成、selectorQuery 获取视频上下文效果预览页面顶部自定义导航栏中间 video 播放云存储视频视频自带预置弹幕下方输入框输入文字点击发送按钮即可在视频上弹出随机颜色弹幕。项目文件结构pages/index/ ├─ index.wxml 页面结构 ├─ index.wxss 页面样式 ├─ index.js 逻辑、弹幕、随机颜色 └─ app.wxss 全局公共样式1、index.wxml2、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?sign013d83b58387df0ca7d70b4bb7037639t1792459117, // 初始弹幕列表 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属于临时访问链接签名过期视频无法播放自己开发时替换成自己的视频链接即可。 
长河君 · 2026/10/29 15:34:35 · 阅读 1.2k 微信小程序 video 视频组件 + 弹幕发送功能完整案例
前言本篇文章给大家带来微信小程序video视频组件的实战案例实现视频播放、预加载弹幕、输入框自定义发送弹幕并且每次发送弹幕自动生成随机颜色。适合小程序初学者学习 video 组件、VideoContext 弹幕 API、云存储视频资源加载。开发环境HBuilderX / 微信开发者工具 知识点video 组件、danmuList 初始弹幕、VideoContext.sendDanmu、随机颜色生成、selectorQuery 获取视频上下文效果预览页面顶部自定义导航栏中间 video 播放云存储视频视频自带预置弹幕下方输入框输入文字点击发送按钮即可在视频上弹出随机颜色弹幕。项目文件结构pages/index/ ├─ index.wxml 页面结构 ├─ index.wxss 页面样式 ├─ index.js 逻辑、弹幕、随机颜色 └─ app.wxss 全局公共样式1、index.wxml2、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?sign013d83b58387df0ca7d70b4bb7037639t1792459117, // 初始弹幕列表 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属于临时访问链接签名过期视频无法播放自己开发时替换成自己的视频链接即可。