# 微信小程序 video视频弹幕案例

微信小程序 video视频弹幕案例一、实验目的掌握小程序video视频组件的使用熟悉弹幕发送接口sendDanmu实现自定义弹幕发送功能理解视频上下文createVideoContext。二、核心知识点video组件danmu-list、enable-danmu、danmu-btn弹幕相关属性wx.createVideoContext()获取视频实例sendDanmu()动态发送弹幕input组件数据绑定、事件获取输入内容三、完整代码index.wxmlscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle空洞骑士-苦痛之路/viewviewclassvideo-layoutvideoidmy-videosrc[https://636c-cloud1-d3g79e0s109db07e4-1505503890.tcb.qcloud.la/6ABC3FB2B317F0B8.mp4?signc09603159b5h278c043caaf1967f4934t179909576](https://636c-cloud1-d3g79e0s109db07e4-1505503890.tcb.qcloud.la/6ABC3FB2B317F0B8.mp4?signc09603159b5h278c043caaf1967f4934t179909576)controlstruedanmu-list{{danmuList}}enable-danmutruedanmu-btntrue/video/viewviewviewclasstxt-style弹幕内容/viewinputtypetextplaceholder在此处输入弹幕内容bind:blurinputBlur/buttontypeprimarybind:tapsendDanmu发送弹幕/button/view/view/scroll-viewindex.jsPage({ 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.wxsspage { 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接口发送弹幕熟悉小程序媒体组件开发与云存储资源引用方式。