微信小程序 video视频弹幕案例
一、实验目的
掌握小程序video视频组件的使用，熟悉弹幕发送接口sendDanmu，实现自定义弹幕发送功能，理解视频上下文createVideoContext。
二、核心知识点
<video>组件：danmu-list、enable-danmu、danmu-btn弹幕相关属性wx.createVideoContext()获取视频实例sendDanmu()动态发送弹幕- input组件数据绑定、事件获取输入内容
三、完整代码
index.wxml
<scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">空洞骑士-苦痛之路</view><viewclass="video-layout"><videoid="my-video"src="[https://636c-cloud1-d3g79e0s109db07e4-1505503890.tcb.qcloud.la/6ABC3FB2B317F0B8.mp4?sign=c09603159b5h278c043caaf1967f4934&t=179909576](https://636c-cloud1-d3g79e0s109db07e4-1505503890.tcb.qcloud.la/6ABC3FB2B317F0B8.mp4?sign=c09603159b5h278c043caaf1967f4934&t=179909576)"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></scroll-view>index.js
Page({ data: { danmuList: [], inputText: "" }, inputBlur(e) { this.setData({ inputText: e.detail.value }) }, sendDanmu() { if (!this.data.inputText.trim()) { return } const videoCtx = wx.createVideoContext("my-video") videoCtx.sendDanmu({ text: this.data.inputText, color: "#ff4444" }) this.setData({ inputText: "" }) } })index.wxss
page { height: 100%; } .scrollarea { height: 100vh; } .box { padding: 20rpx; } .title { font-size: 32rpx; text-align: center; margin-bottom: 20rpx; color:red; } .video-layout { width: 100%; margin-bottom: 30rpx; } video { width: 100%; } .txt-style { font-size: 28rpx; margin-bottom: 10rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; } button { margin-top: 10rpx; }index.json
{ "navigationBarTitleText": "视频弹幕", "usingComponents": {} }app.json
{ "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "视频弹幕", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }四、运行说明
- 视频文件上传至云开发存储，复制云存储下载链接填入video的src
- 编译运行，打开视频弹幕开关
- 在输入框输入弹幕文字，点击发送弹幕，视频上方弹出红色弹幕
- 增加非空判断，空内容无法发送弹幕
五、问题排查
视频403报错：云存储下载链接带签名，具有时效性，链接过期后重新在云存储控制台复制最新链接即可；旧缓存请求会残留报错，清除工具缓存后重新编译。
六、实验总结
本案例使用video媒体组件实现视频播放与自定义弹幕交互，借助VideoContext对象调用sendDanmu接口发送弹幕，熟悉小程序媒体组件开发与云存储资源引用方式。
)
