在小程序开发中video媒体组件用于实现视频播放组件原生支持弹幕功能。本案例演示 video 组件基础使用、预置定时弹幕、手动发送随机颜色弹幕同时体会小程序基础库版本差异带来的组件行为变化适合小程序初学者练习媒体组件。实现效果页面加载视频视频播放到指定秒数自动弹出预置弹幕。在输入框填写弹幕文字点击按钮发送弹幕文字颜色随机生成。danmu‑btn播放器内置弹幕按钮低基础库版本显示高基础库版本失效自定义发送弹幕按钮不受版本影响。一、核心知识点video 组件核心属性src视频网络资源地址controls显示视频播放控制条enable‑danmu开启弹幕总开关danmu‑list预置弹幕数组text弹幕文本、color弹幕颜色、time弹幕出现时间单位秒danmu‑btn播放器自带弹幕开关按钮高版本基础库废弃。VideoContext 视频上下文对象通过wx.createSelectorQuery()获取 video 组件上下文调用sendDanmu()方法动态发送实时弹幕。随机十六进制颜色生成生成 3 组 0‑255 的数字转为 16 进制不足两位补 0拼接为#RRGGBB格式颜色。小程序基础库版本差异低版本基础库播放器会渲染弹幕按钮 高版本基础库danmu‑btn属性不再生效播放器无弹幕按钮但代码调用sendDanmu发送弹幕功能正常。二、新建项目打开微信开发者工具新建小程序项目项目名称video组件后端服务不使用云服务模板选择不使用模板注意视频资源必须使用https 网络地址本地视频无法直接播放。三、完整项目代码app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }pages/index/index.wxml!--index.wxml-- navigation-bar titlevideo组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle华为开发者大会-2026/view view classvideo-layout !-- video的danmu-btn属性在高的小程序基础库版本中不起作用在低的版本中才起作用 -- video idmy-video src{{videoPath}} controlstrue danmu-list{{danmuList}} enable-danmutrue danmu-btntrue / /view view view classtxt-style弹幕内容/view input typetext placeholder在此处输入弹幕内容 bind:blurinputBlur / button typeprimary bind:tapsendDanmu发送弹幕/button /view /view /scroll-viewpages/index/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如果是2位前面不用补0 color color.length 1 ? 0 color : color rgb.push(color) } console.log(rgb); return # rgb.join() } Page({ data: { // 视频地址公网 HTTPS 视频地址模拟器和真机都能播放无需本地服务、无需云开发。 // 注意作业提交时把「华为开发者大会2026.mp4」上传到你自己的公网位置服务器/对象存储/图床直链替换下面这个示例地址即可 videoPath: https://media.w3.org/2010/05/bunny/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() { // 创建视频上下文用于发送弹幕 const query wx.createSelectorQuery() query.select(#my-video).context() query.exec((res) { if (res[0]) { this.videoCtx res[0].context } }) }, inputBlur(e) { console.log(e); this.inputValue e.detail.value }, sendDanmu() { // 发送弹幕接口具体参考https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.sendDanmu.html this.videoCtx.sendDanmu({ // 弹幕文字 text: this.inputValue, // 弹幕颜色 color: getRandomColor() }) } })pages/index/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; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }四、实现效果五、作业基础库版本差异测试切换为低版本基础库例如 2.32.3播放器控制栏会显示弹幕开关按钮danmu‑btn属性生效。切换为高版本基础库例如 3.17.4播放器上自带弹幕按钮消失danmu‑btn属性失效 但是页面自定义的【发送弹幕】按钮依旧可以正常发送弹幕。结论组件属性会随着小程序基础库迭代发生变更开发时要留意官方文档更新。六、常见踩坑与解决弹幕不显示确认开启enable‑danmu视频地址必须是 https 网络链接本地文件不支持检查预置弹幕的time数值播放到对应秒数才出现。sendDanmu 报错videoCtx 为 nullvideo 标签必须写idmy‑videoonLoad中获取上下文不要在页面还没渲染完成就调用发送弹幕。复制代码出现 非法字符编译报错Markdown 复制会携带看不见的零宽特殊字符。解决清空文件手动重新粘贴代码。输入框文字发送弹幕为空本案例使用bindblur失去焦点保存输入内容输入文字后点击发送按钮前需要点击输入框以外区域触发失去焦点拓展优化可以改用bindinput实时保存输入内容不需要失去焦点。七、总结本案例学习小程序video媒体组件掌握预置定时弹幕、动态发送弹幕、随机颜色生成同时理解小程序基础库版本迭代对组件属性带来的影响。VideoContext是视频组件重要 API除发送弹幕外还可以控制视频播放、暂停、跳转进度等。 
长河君 · 2026/10/27 2:03:07 · 阅读 1.2k 微信小程序实验：video组件
在小程序开发中video媒体组件用于实现视频播放组件原生支持弹幕功能。本案例演示 video 组件基础使用、预置定时弹幕、手动发送随机颜色弹幕同时体会小程序基础库版本差异带来的组件行为变化适合小程序初学者练习媒体组件。实现效果页面加载视频视频播放到指定秒数自动弹出预置弹幕。在输入框填写弹幕文字点击按钮发送弹幕文字颜色随机生成。danmu‑btn播放器内置弹幕按钮低基础库版本显示高基础库版本失效自定义发送弹幕按钮不受版本影响。一、核心知识点video 组件核心属性src视频网络资源地址controls显示视频播放控制条enable‑danmu开启弹幕总开关danmu‑list预置弹幕数组text弹幕文本、color弹幕颜色、time弹幕出现时间单位秒danmu‑btn播放器自带弹幕开关按钮高版本基础库废弃。VideoContext 视频上下文对象通过wx.createSelectorQuery()获取 video 组件上下文调用sendDanmu()方法动态发送实时弹幕。随机十六进制颜色生成生成 3 组 0‑255 的数字转为 16 进制不足两位补 0拼接为#RRGGBB格式颜色。小程序基础库版本差异低版本基础库播放器会渲染弹幕按钮 高版本基础库danmu‑btn属性不再生效播放器无弹幕按钮但代码调用sendDanmu发送弹幕功能正常。二、新建项目打开微信开发者工具新建小程序项目项目名称video组件后端服务不使用云服务模板选择不使用模板注意视频资源必须使用https 网络地址本地视频无法直接播放。三、完整项目代码app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }pages/index/index.wxml!--index.wxml-- navigation-bar titlevideo组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle华为开发者大会-2026/view view classvideo-layout !-- video的danmu-btn属性在高的小程序基础库版本中不起作用在低的版本中才起作用 -- video idmy-video src{{videoPath}} controlstrue danmu-list{{danmuList}} enable-danmutrue danmu-btntrue / /view view view classtxt-style弹幕内容/view input typetext placeholder在此处输入弹幕内容 bind:blurinputBlur / button typeprimary bind:tapsendDanmu发送弹幕/button /view /view /scroll-viewpages/index/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如果是2位前面不用补0 color color.length 1 ? 0 color : color rgb.push(color) } console.log(rgb); return # rgb.join() } Page({ data: { // 视频地址公网 HTTPS 视频地址模拟器和真机都能播放无需本地服务、无需云开发。 // 注意作业提交时把「华为开发者大会2026.mp4」上传到你自己的公网位置服务器/对象存储/图床直链替换下面这个示例地址即可 videoPath: https://media.w3.org/2010/05/bunny/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() { // 创建视频上下文用于发送弹幕 const query wx.createSelectorQuery() query.select(#my-video).context() query.exec((res) { if (res[0]) { this.videoCtx res[0].context } }) }, inputBlur(e) { console.log(e); this.inputValue e.detail.value }, sendDanmu() { // 发送弹幕接口具体参考https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.sendDanmu.html this.videoCtx.sendDanmu({ // 弹幕文字 text: this.inputValue, // 弹幕颜色 color: getRandomColor() }) } })pages/index/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; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }四、实现效果五、作业基础库版本差异测试切换为低版本基础库例如 2.32.3播放器控制栏会显示弹幕开关按钮danmu‑btn属性生效。切换为高版本基础库例如 3.17.4播放器上自带弹幕按钮消失danmu‑btn属性失效 但是页面自定义的【发送弹幕】按钮依旧可以正常发送弹幕。结论组件属性会随着小程序基础库迭代发生变更开发时要留意官方文档更新。六、常见踩坑与解决弹幕不显示确认开启enable‑danmu视频地址必须是 https 网络链接本地文件不支持检查预置弹幕的time数值播放到对应秒数才出现。sendDanmu 报错videoCtx 为 nullvideo 标签必须写idmy‑videoonLoad中获取上下文不要在页面还没渲染完成就调用发送弹幕。复制代码出现 非法字符编译报错Markdown 复制会携带看不见的零宽特殊字符。解决清空文件手动重新粘贴代码。输入框文字发送弹幕为空本案例使用bindblur失去焦点保存输入内容输入文字后点击发送按钮前需要点击输入框以外区域触发失去焦点拓展优化可以改用bindinput实时保存输入内容不需要失去焦点。七、总结本案例学习小程序video媒体组件掌握预置定时弹幕、动态发送弹幕、随机颜色生成同时理解小程序基础库版本迭代对组件属性带来的影响。VideoContext是视频组件重要 API除发送弹幕外还可以控制视频播放、暂停、跳转进度等。