一、实验目的掌握小程序video视频组件常用属性实现视频播放。理解弹幕机制学会配置预设弹幕列表danmuList。掌握wx.createSelectorQuery()获取VideoContext视频上下文调用sendDanmu()发送实时弹幕。实现随机十六进制颜色函数让发送的弹幕颜色随机变化。了解小程序基础库版本差异danmu‑btn弹幕开关按钮仅低版本基础库生效高版本该属性失效。掌握 input 输入框bind:blur失去焦点事件获取用户输入内容。二、实验环境开发工具微信开发者工具项目模式不使用云服务、不使用模板渲染引擎renderer:webviewwebview 渲染模式三、实验需求分析基础功能页面展示 video 视频播放器视频播放到指定时间自动播放预设弹幕。提供输入框用户输入文字点击按钮发送弹幕弹幕颜色随机生成。页面包含橙色外边框红色页面标题原生导航栏标题为 video 组件。作业扩充要求切换低版本调试基础库播放器显示弹幕开关按钮。切换高版本调试基础库弹幕开关按钮消失弹幕发送功能仍然正常可用。四、核心知识点梳理1.video 组件核心属性表格属性说明id组件标识用于获取视频上下文src视频资源地址必须为 https 网络地址或者云文件 ID不能使用本地项目内 mp4 文件controlstrue显示播放控件播放、进度条、全屏danmu‑list预设弹幕数组每个弹幕对象包含text弹幕文字、color弹幕颜色、time弹幕出现时间单位秒enable‑danmutrue开启弹幕总开关必须开启弹幕才会显示danmu‑btntrue弹幕开关按钮仅低基础库版本生效高版本废弃该属性2.VideoContext 视频上下文通过wx.createSelectorQuery()查询获取 video 组件上下文对象调用sendDanmu({text,color})接口实现向视频发送实时弹幕。3. 随机十六进制颜色利用Math.random()生成 0‑255 的数字使用toString(16)转为十六进制如果是单字符前面补0拼接成#RRGGBB标准颜色格式。4.input bind:blur 事件输入框失去焦点才捕获输入内容保存文本用于后续发送弹幕。5. 视频资源注意事项❌禁止直接把 mp4 视频放在小程序项目文件夹模拟器可以播放真机直接黑屏。 ✅方案 1云开发存储上传视频复制云文件 ID✅方案 2外网 HTTPS 视频链接。五、完整代码实现1.app.json全局配置原生导航栏{ pages: [ pages/index/index ], window: { navigationBarTitleText: video组件, navigationBarTextStyle: black, navigationBarBackgroundColor: #ffffff }, style: v2, renderer: webview, componentFramework: glass‑easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2.pages/index/index.wxmlscroll-view classscrollarea scroll-y typelist view classbox view classtitle华为开发者大会‑2026/view view classvideo-layout video idmy‑video src{{videoPath}} controlstrue danmu‑list{{danmuList}} enable‑danmutrue/video /view view classtxt‑style弹幕内容/view input typetext placeholder在此处输入弹幕内容 bind:blurinputBlur/ button typeprimary bind:tapsendDanmu发送弹幕/button /view /scroll-view3.pages/index/index.js// 获取随机十六进制颜色 function getRandomColor() { let rgb []; for(let index 0; index 3; index){ let color Math.floor(Math.random() * 256).toString(16); color color.length 1 ? 0 color : color; rgb.push(color); } return # rgb.join(); } Page({ data:{ // 此处替换为你的https视频地址 / 云文件ID videoPath:https://www.w3schools.com/html/mov_bbb.mp4, // 预设弹幕text文字、color颜色、time出现时间(秒) 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(){ // 获取VideoContext视频上下文用于发送弹幕 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() }) } })4.pages/index/index.wxsspage { height: 100vh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); box-sizing: border-box; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } video { width: 95%; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }5.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; }6.pages/index/index.json{}六、运行效果页面顶部原生导航栏标题显示video组件页面完整展示橙色边框、红色标题。视频播放器加载测试视频视频播放到对应秒数自动弹出预设弹幕。在输入框输入文字点击发送弹幕按钮视频上弹出随机颜色的弹幕。切换调试基础库版本低版本2.32.3播放器显示弹幕开关按钮。高版本3.17.4弹幕开关按钮消失发送弹幕功能不受影响。七、实验踩坑与问题解决页面边框、标题看不见被顶部遮挡原因开启navigationStyle:custom自定义导航页面没有留出状态栏安全高度。 解决关闭自定义导航栏使用系统原生导航css 添加padding‑top: env(safe‑area‑inset‑top)适配手机安全区。弹幕按钮 danmu‑btn 不显示不是代码错误小程序新版本基础库废弃该属性切换到低版本调试基础库即可看到弹幕开关。弹幕发送功能高低版本都可用。调用 sendDanmu 报错弹幕发不出去原因没有成功获取VideoContext视频上下文video 标签缺少 id。 解决video 组件设置id在onLoad生命周期通过createSelectorQuery获取上下文对象。真机视频黑屏无法播放原因使用本地项目 mp4 文件或者 http 非加密链接。 解决视频上传云开发存储拿到云文件 ID或者使用 https 公开视频地址。预设弹幕完全不显示检查是否开启enable‑danmutrue确认danmuList数组内 time 时间单位是秒。八、实验总结本次实验学习小程序video媒体视频组件掌握预设弹幕与实时发送弹幕的开发流程。 学会使用wx.createSelectorQuery获取组件上下文调用组件实例方法。实现随机十六进制颜色生成函数完成弹幕随机变色效果。 同时认识小程序基础库版本差异性部分组件属性会随版本迭代废弃。 掌握视频资源的限制规则理解真机与模拟器行为差异开发视频小程序时必须使用网络视频资源不能直接引用本地 mp4 文件。