本篇文章为大家展示了怎么在微信小程序开发中实现一个视频弹幕发送功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
1。目录结构
2。videoDanmu
& lt; !——,视频区域,——比; https://www.yisu.com/zixun/& lt; video  src=" {{src}}” id=笆悠怠? danmu-btn enable-danmu danmu-list=" {{danmuList}} "> 视频> <!——弹幕发送区域- -> <视图类=皊endDanmu”>
/*,页面/videoDanmu/videoDanmu.wxss */#{视频 ,,宽度:100%; 高度:才能,calc (750 rpx *, 225,, 300); } .sendDanmu { ,,显示:flex; ,,身高:100 rpx; } textarea {.sendDanmu 边境才能:1 px solid # ddd; ,,身高:100 rpx; } .selectColor { ,,显示:flex; ,,justify-content:之间的空间; ,,margin-top: 20 rpx; 边境才能:1 px solid # ddd; ,,对齐项目:中心; } .selectDefaultColor { ,,显示:flex; ,,justify-content:之间的空间; ,,对齐项目:中心; 边境才能:1 px solid # ddd; ,,margin-top: 20 rpx; ,,margin-right: 30 rpx; } {.selectDefaultColor 视图 ,,宽度:50 rpx; ,,身高:50 rpx; ,,背景颜色:红色; }
//,/videoDanmu/videoDanmu.js页面 页面({ ,/* * ,,*,页面的初始数据 ,,*/,,数据:{ ,,,//,视频地址 ,,,src:“http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400& bizid=1023, hy=SH& fileparam=302 c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" ,,,danmuList: ,,,({ ,,,,:,& # 39;第,1 s 出现的弹幕& # 39;, ,,,,颜色:,& # 39;# ff0000 # 39; ,,,,时间:1 ,,,},{ ,,,,:,& # 39;第,3 s 出现的弹幕& # 39;, ,,,,颜色:,& # 39;#就# 39; ,,,,时间:3 ,,,},,//,初始弹幕列表 ,,,defaultColor:, & # 39;红色# 39;,,//,弹幕默认颜色 ,,,isRandomColor:,假的,,//,控制弹幕是否随机颜色 ,,},//,才能获取弹幕内容 handleDanmuContent才能(e) { ,,,this.content =, e.detail.value; ,,},//,才能随机弹幕颜色 randomColor才能(){ ,,,let red =, math . random (), *, 255; ,,,let green =, math . random (), *, 255; ,,,let blue =, math . random (), *, 255; ,,,return “rgb(${红},${绿},{蓝})美元的 ,,},//,才能发送弹幕 handleSendDanmu才能(){ ,,,let color =, & # 39; & # 39;; ,,,//,通过状态值判断是默认颜色还是随机颜色 ,,,如果(this.data.isRandomColor) { ,,,,,color =, this.randomColor () 还有,,,}{ ,,,,,color =this.data.defaultColor ,,,} ,,,this.videoContext.sendDanmu ({ ,,,,,:,this.content, ,,,,,的颜色 ,,,,}) ,,},//才能,处理弹幕是否随机颜色 handleChange才能(e) { ,,,//,console.log (e.detail.value) ,,,this.setData ({ ,,,,,isRandomColor: e.detail.value ,,,}) ,,},//,才能跳转到选择颜色页面 handleGotoSelectColor才能(){ ,,,wx.navigateTo ({ ,,,,url:,“/页/selectColor/selectColor" ,,,}) ,,}, ,/* * ,,*,生命周期函数——监听页面初次渲染完成 ,,*/,,onReady: function (), { ,,,//,创建,video 上下文,VideoContext 对象。通过这个对象发送弹幕 ,,,this.videoContext =, wx.createVideoContext(& # 39;视频# 39;,,) ,,} })
3。null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null