一、实验目的
- 掌握微信小程序
video组件的常用属性（如src、controls、enable-danmu、danmu-btn等）。 - 学会使用
wx.createSelectorQuery()获取VideoContext视频上下文对象。 - 掌握通过
VideoContext.sendDanmu()接口向视频发送自定义文本和颜色的弹幕。 - 掌握在 JavaScript 中生成随机十六进制颜色码（
#RRGGBB）的算法。 - 理解并实测不同基础库版本对
video组件特定属性（如danmu-btn）的兼容性差异。
二、实验环境
微信开发者工具，基础版微信小程序项目。
三、需求说明
- 页面包含一个视频播放器、一个文本输入框和一个“发送弹幕”按钮。
- 点击视频可以正常播放。在输入框中输入文字并点击发送，视频画面上会飘过该文字。
- 弹幕文字的颜色必须是随机生成的。
- 功能扩展：录屏展示基础库版本差异。在低版本基础库中，视频底部自带弹幕按钮；在高版本基础库中，该按钮被隐藏。
重点注意：本地视频文件建议放在项目根目录的
videos文件夹下，并在代码中使用绝对路径引入（如/videos/demo.mp4），且单个包大小不要超过 2MB。
四、完整代码
1.index.wxml
<!--index.wxml--> <navigation-bar title="video组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view style="text-align: right; font-size: 24rpx; color: #666; margin-bottom: 10rpx;">杨淑婷 24103086</view> <view class="title">华为开发者大会-2026</view> <view class="video-layout"> <!-- 注意 src 的路径，这里引入了本地 videos 文件夹下的视频 --> <video id="my-video" src="/videos/demo.mp4" controls="true" enable-danmu="true" danmu-btn="true" style="width: 100%; height: 400rpx;"> </video> </view> <view class="txt-style">弹幕内容</view> <input type="text" placeholder="在此处输入弹幕内容" bind:blur="inputBlur" /> <button type="primary" style="background-color: #07c160; margin-top: 20rpx;" bind:tap="sendDanmu">发送弹幕</button> </view> </scroll-view>2.index.js
// index.js // 生成随机十六进制颜色 function getRandomColor() { let rgb = [] for (let index = 0; index < 3; index++) { let color = Math.floor(Math.random() * 256).toString(16) // 如果十六进制只有1位，前面补0（例如 A 变成 0A） color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ data: {}, onLoad() { // 创建视频上下文用于发送弹幕 const query = wx.createSelectorQuery() query.select('#my-video').context() query.exec((res) => { if (res[0]) { this.videoCtx = res[0].context } }) }, // 输入框失去焦点时，获取并保存输入的文字 inputBlur(e) { this.inputValue = e.detail.value }, // 点击发送弹幕按钮 sendDanmu() { if (!this.inputValue) { wx.showToast({ title: '请输入弹幕内容', icon: 'none' }) return } if (!this.videoCtx) { wx.showToast({ title: '视频尚未准备好', icon: 'none' }) return } // 调用上下文的 sendDanmu 方法发送弹幕 this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() // 随机颜色 }) } });3.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; margin-bottom: 20rpx; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }4.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; }五、运行效果
- 小程序启动后，视频正常加载，默认暂停。
- 点击视频播放，可暂停、全屏，控制栏正常生效。
- 输入文字点发送弹幕，视频画面出现从右向左飘过的彩色弹幕文字。
- 兼容性测试：切换到低版本基础库，视频底部自带弹幕按钮；切换高版本基础库，自带弹幕按钮消失，验证属性版本兼容问题。
- 截图：
六、踩坑记录（重点）
- 本地视频加载失败：使用绝对路径
/videos/demo.mp4；本地视频不能过大，代码包上限2MB，超出无法预览，可替换线上视频地址。 - sendDanmu 报错，视频上下文为空：页面渲染完成后才能获取VideoContext，代码增加判断兜底；工具缓存问题可清除缓存重试。
- 弹幕不显示：
<video>标签必须开启enable-danmu="true"，否则弹幕接口无效。 - danmu-btn 失效：该属性新版基础库已经废弃。不依赖播放器自带弹幕按钮，自己写按钮调用
sendDanmu才是稳定方案。
七、实验总结
本次实验基于video组件实现视频播放与自定义彩色弹幕。学习使用wx.createSelectorQuery获取组件上下文对象，调用组件实例API实现弹幕发送；编写随机十六进制颜色函数，实现弹幕随机色彩。 同时对比不同小程序基础库版本，验证组件属性兼容性。明白了小程序很多组件属性会随基础库迭代废弃，开发时需要查阅官方文档，优先自定义交互，不要依赖播放器内置控件，进一步理解小程序组件实例调用的开发思路。