基本实现功能
1，小程序播放在线视频
2，视频带弹幕效果
3，弹幕可以自定义颜色
先看效果图
1，模拟器
2，真机运行效果
3，选择弹幕颜色
微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.
1.视频播放器
微信已经封装的非常好.我这里只用了很简单的几个属性
由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.
弹幕列表的元素:
{ text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//发送的时间 }
其他的属性就不说了,以后遇到再细细研究.
下面是官方video属性部分截图
2.选择弹幕颜色
从上面的弹幕列表元素可以看出,微信并没有给开发者太多的自定义空间.文本?时间?颜色?
也就颜色还能玩出点花样吧.
于是我就简单的做了个常用颜色的列表.算是自定义弹幕颜色吧
上代码:
ps:代码只是有些简单的注释,很烂,凑活着看吧.
1，index.wxml
<!--index.wxml--> <!--有问题加微信：2501902696（备注小程序）--> <!--备用视频src,如果下面src不能用就用这个http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4--> <view class="section tc"> <video id="myVideo" style="height:{{videoHeight}}px;width:{{videoWidth}}px" 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 class="btn-area"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__bd"> <input class="weui-input" placeholder="请输入弹幕" bindblur="bindInputBlur" /> </view> </view> <button style="margin:30rpx;" bindtap="bindSendDanmu">发送弹幕</button> </view> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">随机颜色</view> <view class="weui-cell__ft"> <switch checked bindchange="switchChange" /> </view> </view> <view class="colorstyle" bindtap="selectColor"> <text>选择颜色</text> <view style="height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}"></view> </view>
2,index.js
主要实现弹幕随机颜色，弹幕播放等
//index.js //有问题加微信：2501902696（备注小程序） //用来生成随机颜色 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 }, { text: '第 3s 你可以发送自己的弹幕了', color: '#000000', time: 3 } ] }, 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 }) } })
由于篇幅有限，其他页面的代码，大家可以下载源码查看
