一、实验目的掌握微信小程序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 titlevideo组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view styletext-align: right; font-size: 24rpx; color: #666; margin-bottom: 10rpx;杨淑婷 24103086/view view classtitle华为开发者大会-2026/view view classvideo-layout !-- 注意 src 的路径这里引入了本地 videos 文件夹下的视频 -- video idmy-video src/videos/demo.mp4 controlstrue enable-danmutrue danmu-btntrue stylewidth: 100%; height: 400rpx; /video /view view classtxt-style弹幕内容/view input typetext placeholder在此处输入弹幕内容 bind:blurinputBlur / button typeprimary stylebackground-color: #07c160; margin-top: 20rpx; bind:tapsendDanmu发送弹幕/button /view /scroll-view2.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-danmutrue否则弹幕接口无效。danmu-btn 失效该属性新版基础库已经废弃。不依赖播放器自带弹幕按钮自己写按钮调用sendDanmu才是稳定方案。七、实验总结本次实验基于video组件实现视频播放与自定义彩色弹幕。学习使用wx.createSelectorQuery获取组件上下文对象调用组件实例API实现弹幕发送编写随机十六进制颜色函数实现弹幕随机色彩。 同时对比不同小程序基础库版本验证组件属性兼容性。明白了小程序很多组件属性会随基础库迭代废弃开发时需要查阅官方文档优先自定义交互不要依赖播放器内置控件进一步理解小程序组件实例调用的开发思路。
)
