把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?
果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.
先上gif:
再上几张图:
1.视频播放器
2.选择弹幕颜色
3.弹幕来了...
1.视频播放器
微信已经封装的非常好.我这里只用了很简单的几个属性
由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.
弹幕列表的元素:
{ text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//发送的时间 }
其他的属性就不说了,以后遇到再细细研究.
2.选择弹幕颜色
从上面的弹幕列表元素可以看出,微信并没有给开发者太多的自定义空间.文本?时间?颜色?
也就颜色还能玩出点花样吧.
于是我就简单的做了个常用颜色的列表.算是自定义弹幕颜色吧
上代码:
ps:代码没整理,很烂,凑活着看吧.
1.index.wxml
<!--index.wxml--> <view> <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> <view> <view> <view> <input placeholder="请输入弹幕" bindblur="bindInputBlur" /> </view> </view> <button bindtap="bindSendDanmu">发送弹幕</button> </view> </view> <view> <view> <view>随机颜色</view> <view> <switch checked bindchange="switchChange" /> </view> </view> <view bindtap="selectColor"> <text>选择颜色</text> <view></view> </view>
2.index.wxss
(从别的项目粘过来的.哈哈)
/**index.wxss**/ .weui-cells { position: relative; margin-top: 1.17647059em; background-color: #FFFFFF; line-height: 1.41176471; font-size: 17px; } .weui-cells:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells_after-title { margin-top: 0; } .weui-cell__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .weui-cell__ft { text-align: right; color: #999999; } .weui-cell { padding: 10px 10px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cell:before { content: " "; position: absolute; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; left: 15px; } .weui-cell:first-child:before { display: none; } .colorstyle{ border-top: 2px solid #eee; border-bottom: 2px solid #eee; padding-left: 10px; padding-right: 10px; font-size: 17px; line-height: 100rpx; display: flex; flex-direction: row; justify-content:space-between; }
3.index.js
//index.js function getRandomColor() { let rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onLoad: function () { var _this = this; //获取屏幕宽高 wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; //video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。 var videoHeight = (225 / 300) * windowWidth//屏幕高宽比 console.log('videoWidth: ' + windowWidth) console.log('videoHeight: ' + videoHeight) _this.setData({ videoWidth: windowWidth, videoHeight: videoHeight }) } }) }, onReady: function (res) { this.videoContext = wx.createVideoContext('myVideo') }, onShow: function () { var _this = this; //获取年数 wx.getStorage({ key: 'numberColor', success: function (res) { console.log(res.data + "numberColor----") _this.setData({ numberColor: res.data, }) } }) }, inputValue: '', data: { isRandomColor: true,//默认随机 src: '', numberColor: "#ff0000",//默认黑色 danmuList: [ { text: '第 1s 出现的红色弹幕', color: '#ff0000', time: 1 }, { text: '第 2s 出现的绿色弹幕', color: '#00ff00', time: 2 } ] }, bindInputBlur: function (e) { this.inputValue = e.detail.value }, bindSendDanmu: function () { if (this.data.isRandomColor) { var color = getRandomColor(); } else { var color = this.data.numberColor; } this.videoContext.sendDanmu({ text: this.inputValue, color: color }) }, videoErrorCallback: function (e) { console.log('视频错误信息:') console.log(e.detail.errMsg) }, //选择颜色页面 selectColor: function () { wx.navigateTo({ url: '../selectColor/selectColor', success: function (res) { // success }, fail: function () { // fail }, complete: function () { // complete } }) }, //switch是否选中 switchChange: function (e) { this.setData({ isRandomColor: e.detail.value }) } })
4.selectColor.wxml