微信小程序 video 组件与弹幕实战

一、案例描述设计一个小程序演示 video 组件的功能和使用方法实现视频播放、定时弹幕滚动以及发送随机颜色弹幕的功能。二、核心知识点video 组件src 指定视频地址controls 显示控制栏danmu-list 提供初始弹幕列表enable-danmu 开启弹幕滚动danmu-btn 显示弹幕开关按钮。VideoContext通过 wx.createSelectorQuery() 获取 video 节点的 context再调用 videoCtx.sendDanmu({ text, color }) 动态发送弹幕。版本差异重点​danmu-btn 属性在低版本基础库中有效播放时显示弹幕按钮在高版本基础库中不起作用不显示按钮这是本次拓展演示的核心。随机颜色Math.floor(Math.random() * 256).toString(16) 生成 RGB 三分量十六进制并拼接成 #RRGGBB。三、代码实现app.json使用 webview 渲染引擎json{“pages”: [“pages/index/index”],“window”: {“navigationBarTextStyle”: “black”,“navigationStyle”: “custom”},“renderer”: “webview”}index.wxmlhtmlSintel-开源动画电影预告片弹幕内容发送弹幕index.jsjsfunction getRandomColor() {let rgb []for (let i 0; i 3; i) {let color Math.floor(Math.random() * 256).toString(16)color color.length 1 ? ‘0’ color : colorrgb.push(color)}return ‘#’ rgb.join(‘’)}Page({data: {vieoPath: ‘https://media.w3.org/2010/05/sintel/trailer.mp4’,danmuList: [{ text: ‘SintelBlender开源动画电影’, color: ‘#ff0000’, time: 1 },{ text: ‘为了寻找小龙她踏上了冒险之旅’, color: ‘#ff00ff’, time: 5 },{ text: ‘Blender基金会出品’, color: ‘#00ff00’, time: 10 },{ text: ‘开源动画三部曲’, color: ‘#00ffff’, time: 20 }]},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() {this.videoCtx.sendDanmu({text: this.inputValue,color: getRandomColor()})}})样式部分index.wxss / app.wxss主要完成 flex 居中、输入框下边框、标题红色加粗等简单排版篇幅所限不再赘述。四、效果与版本差异演示视频播放到 1s / 5s / 10s / 20s 时预设的四种颜色弹幕自动从右向左滚动输入文字点“发送弹幕”弹幕以随机颜色出现在视频上低版本基础库如 3.1.7.4播放时左下角显示“弹幕”按钮可开关弹幕高版本基础库如 3.7.xdanmu-btn 失效按钮不显示但弹幕滚动正常。五、踩坑总结danmu-btn 高版本失效是官方已知行为做作业录屏时要用“详情 → 本地设置 → 调试基础库”切换版本分别演示sendDanmu 必须在 video 节点 context 创建成功后调用建议放在 onLoad 的 exec 回调里16 进制颜色不足两位要补 0否则会出现 #f00 这类非法值导致弹幕变黑。