企业官网建设流程全解析

微信小程序 video 组件实战：从布局到弹幕功能全解析

配套案例：案例 4.7 video 组件（华为开发者大会-2026）
技术栈：微信小程序（原生框架）｜WXML / WXSS / JS

一、引言

video 组件是微信小程序最常用的媒体组件之一，用于在页面中播放视频，并支持弹幕、倍速、全屏、进度条等丰富功能。本文通过一个「华为开发者大会-2026」视频播放页面的完整实现，带你一步步掌握 video 组件的核心用法，包括页面布局、自定义导航栏、视频源配置以及弹幕功能的开发。

二、项目结构

小程序项目根目录 ├── app.json 全局配置 ├── app.wxss 全局样式 └── pages └── index ├── index.json 页面配置 ├── index.wxml 页面结构 ├── index.wxss 页面样式 └── index.js 页面逻辑

三、页面布局设计

1. 自定义顶部导航栏

微信小程序的系统导航栏有时会因为机型或窗口宽度问题显示不稳定。为了保证任何机型下顶部标题都能稳定显示，这里采用自定义固定导航栏方案：

<!-- index.wxml --><viewclass="nav-bar"style="padding-top:{{statusBarHeight}}px;"><textclass="nav-title">video组件</text></view>

/* index.wxss */.nav-bar{position:fixed;/* 固定在顶部 */top:0;left:0;right:0;height:88rpx;background:#ffffff;display:flex;align-items:center;justify-content:center;box-shadow:0 2rpx 8rpxrgba(0,0,0,0.08);z-index:999;}

关键点：

• position: fixed让导航栏脱离文档流，始终固定在屏幕顶部
• padding-top用状态栏高度撑开，避开手机顶部状态栏（时间、电量区域）
• z-index: 999保证导航栏在最上层

2. 页面主体内容下移

为了避免内容被固定导航栏遮挡，需要通过内边距把内容整体下移：

.page-content{padding-top:260rpx;/* 为固定导航栏+状态栏留出空间 */}

3. 视频容器与弹幕输入区

<viewclass="page-content"><viewclass="box"><viewclass="title">华为开发者大会-2026</view><viewclass="video-layout"><videoid="myVideo"src="{{videoPath}}"controls="true"danmu-list="{{danmuList}}"enable-danmu="true"danmu-btn="true"></video></view><view><viewclass="txt-style">弹幕内容</view><inputtype="text"placeholder="在此处输入弹幕内容"bind:blur="inputBlur"/><buttontype="primary"bind:tap="sendDanmu">发送弹幕</button></view></view></view>

四、video 组件核心属性讲解

五、视频源配置：本地文件 vs 云存储

❌ 踩坑提醒：视频文件如果放在 pages 本地目录，会占用小程序主包体积。小程序主包上限是2MB，而高清视频动辄几十 MB，直接导致编译报错：

source size 19813 KB exceed max limit 2MB

✅ 正确做法：用云开发（云存储）存放视频

1. 在微信开发者工具中开通云开发
2. 在「存储」中上传视频文件，获得 FileID
3. 通过「获取临时链接」得到 https 可播放地址，填入src

⚠️ 注意：云存储临时链接有有效期（默认约2小时），过期后视频会黑屏，需要重新获取临时链接替换。

六、弹幕功能实现

1. 预置弹幕列表

danmuList:[{text:"鸿蒙世界，奔腾不息",time:2,color:"#ff0000"},{text:"华为开发者大会2026",time:8,color:"#00ff00"},{text:"跟上新时代",time:28,color:"#00ffff"}]

2. 获取视频上下文

要发送弹幕，必须先通过选择器拿到 video 组件的上下文对象：

onLoad(){constquery=wx.createSelectorQuery()query.select('#myVideo').context()query.exec((res)=>{if(res[0]){this.videoCtx=res[0].context}})}

3. 发送弹幕 + 随机颜色

videoContext.sendDanmu()可以发送自定义弹幕，颜色支持随机生成：

functiongetRandomColor(){letrgb=[]for(letindex=0;index<3;index++){letcolor=Math.floor(Math.random()*256).toString(16)color=color.length===1?'0'+color:color rgb.push(color)}return'#'+rgb.join('')}sendDanmu(){if(!this.inputValue||!this.inputValue.trim())returnthis.videoCtx.sendDanmu({text:this.inputValue,color:getRandomColor()})}

七、完整代码清单

app.json

{"pages":["pages/index/index"],"window":{"navigationBarTextStyle":"black","navigationStyle":"custom"},"style":"v2","renderer":"webview","sitemapLocation":"sitemap.json"}

pages/index/index.js

functiongetRandomColor(){letrgb=[]for(letindex=0;index<3;index++){letcolor=Math.floor(Math.random()*256).toString(16)color=color.length===1?'0'+color:color rgb.push(color)}return'#'+rgb.join('')}Page({data:{statusBarHeight:20,videoPath:"你的云存储视频临时链接",danmuList:[{text:"鸿蒙世界，奔腾不息",time:2,color:"#ff0000"},{text:"华为开发者大会2026",time:8,color:"#00ff00"},{text:"跟上新时代",time:28,color:"#00ffff"}]},onLoad(){constinfo=wx.getWindowInfo()this.setData({statusBarHeight:info.statusBarHeight})constquery=wx.createSelectorQuery()query.select('#myVideo').context()query.exec((res)=>{if(res[0]){this.videoCtx=res[0].context}})},inputBlur(e){this.inputValue=e.detail.value},sendDanmu(){if(!this.inputValue||!this.inputValue.trim())returnthis.videoCtx.sendDanmu({text:this.inputValue,color:getRandomColor()})}})

八、运行与调试要点

1. 修改配置（app.json）后，热重载不会生效，需要点击工具栏的【编译】按钮或先清缓存再编译。
2. 自定义导航栏对任何机型、窗口宽度都稳定，是替代系统导航栏的可靠方案。
3. 视频黑屏排查顺序：链接是否过期 → 视频源是否可访问 → 云存储权限是否「所有用户可读」。

九、总结

本文通过完整的案例 4.7，带你掌握了：

• video 组件的属性配置与弹幕功能
• 自定义固定导航栏实现稳定标题
• 云开发云存储解决视频体积超限问题
• 视频上下文的获取与弹幕发送

希望这篇博客对你有帮助，动手写一个属于自己的视频弹幕小程序吧！