一、案例描述
设计一个小程序，演示 video 组件的功能和使用方法，以及发送弹幕和创建随机颜色的方法。小程序运行后可以播放视频，在指定时间显示预置弹幕，还可以通过输入框和按钮发送随机颜色的弹幕。
二、实现思路
- 页面中使用 video 组件播放视频，通过
danmu-list设置弹幕列表，enable-danmu开启弹幕，danmu-btn显示弹幕开关按钮。 - 页面下方放置 input 输入框和 button 按钮，用于输入并发送弹幕。
- 在
onLoad中通过wx.createSelectorQuery()获取 video 组件上下文VideoContext，发送弹幕时调用VideoContext.sendDanmu()接口。 - 编写
getRandomColor()函数生成随机的十六进制颜色，让每次发送的弹幕颜色都不同。
三、核心代码
index.wxml
<navigation-bartitle="video组件"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">华为开发者大会-2026</view><viewclass="video-layout"><!-- video的danmu-btn属性在高的小程序基础库版本中不起作用，在低的版本中才起作用 --><videoid="my-video"src="{{videoPath}}"controls="true"danmu-list="{{danmuList}}"enable-danmu="true"danmu-btn="true"/></view><view><viewclass="txt-style">弹幕内容</view><inputtype="text"placeholder="在此处输入弹幕内容"bind:blur="inputBlur"/><buttontype="primary"bind:tap="sendDanmu">发送弹幕</button></view></view></scroll-view>index.js
// 获取随机颜色functiongetRandomColor(){letrgb=[]for(letindex=0;index<3;index++){letcolor=Math.floor(Math.random()*256).toString(16)// 如果十六进制是1位，前面补0；如果是2位，前面不用补0color=color.length==1?'0'+color:color rgb.push(color)}return'#'+rgb.join('')}Page({data:{videoPath:'https://media.w3.org/2010/05/sintel/trailer.mp4',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(){// 创建视频上下文用于发送弹幕constquery=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()})}})四、关键知识点
- video 常用属性：
src视频地址、controls显示播放控件、danmu-list弹幕列表、enable-danmu是否展示弹幕、danmu-btn是否显示弹幕按钮。 - danmu-list：数组元素的
text为弹幕文字，color为弹幕颜色，time为弹幕出现的时间（秒）。 - VideoContext.sendDanmu：通过视频上下文发送弹幕，参数为
{ text, color }。 - 随机颜色生成：
Math.floor(Math.random() * 256).toString(16)生成 0~255 的十六进制数，不足两位时前面补 0，拼接成#rrggbb形式。
五、功能扩展：danmu-btn 与小程序基础库版本的关系
video 组件的danmu-btn属性在高版本的小程序基础库中不起作用，在低版本的基础库中才起作用。验证方法：在微信开发者工具中点击右上角"详情"→"本地设置"→"调试基础库"，切换不同的基础库版本后重新编译：
- 基础库使用低版本时，视频播放时控制条上可以显示弹幕按钮；
- 基础库使用高版本时，视频播放时不显示弹幕按钮。
作业中已按此要求录制了演示视频，分别展示了低版本基础库下显示弹幕按钮、高版本基础库下不显示弹幕按钮两种情况。
六、总结
本案例通过 video 组件实现了视频播放、预置弹幕展示和随机颜色弹幕发送功能，并通过切换基础库版本验证了danmu-btn属性的版本兼容性问题。
