微信小程序开发之视频播放器Video弹幕弹幕颜色自定义教材

1、Video微信小程序开发之视频播放器 弹幕 弹幕颜色自定义 把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣 果然 ,微信小程序视频自带弹幕 .是不是很爽 ,跟我一起来看看 . 微信小程序开发之录音机 音频播放 动画 （真机可用 ） 先上 gif:再上几张图 :1.视频播放器2.选择弹幕颜色3.弹幕来了1.视频播放器微信已经封装的非常好 .我这里只用了很简单的几个属性由于以前没做过弹幕 ,看到 danmu-list 就激动了 .而且只需要将弹幕内容加入集合即可 弹幕列表的元素 :text: 第 1s 出现的红色弹幕 ,/文本 color: #ff0000,/ 颜色 time: 1/

2、 发送的时间其他的属性就不说了 ,以后遇到再细细研究 .,微信并没有给开发者太多的自定义空间.文本?时间 ?颜色?2.选择弹幕颜色 从上面的弹幕列表元素可以看出 也就颜色还能玩出点花样吧 .于是我就简单的做了个常用颜色的列表.算是自定义弹幕颜色吧上代码 :ps:代码没整理 ,很烂 ,凑活着看吧 .1.index.wxmlhtml view plain copy 在 CODE 上查看代码片派生到我的代码片 发送弹幕 随机颜色 选择颜色 2.index.wxss（从别的项目粘过来的 .哈哈 ）css view plain copy 在 CODE 上查看代码片派生到我的代码片/*index.wxss

3、*/.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

4、;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-b

5、ox;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;.colorstyl

6、eborder-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.jsjavascript view plain copy 在 CODE 上查看代码片派生到我的代码片 /index.jsfunction getRandomColor() let r

7、gb = 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

8、标签认宽度 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.crea

9、teVideoContext(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 出现的红色弹

10、幕 , 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.inpu

11、tValue,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 是否选中switchChang

12、e: function (e) this.setDta( isRandomColor: e.detail.value)4. selectColor.wxmlhtml view plain copy 在 CODE 上查看代码片派生到我的代码片5. selectColor.wxsscss view plain copy 在 CODE 上查看代码片派生到我的代码片/*selectColor.wxss*/.weui-grids border-top: 1rpx solid #D9D9D9;border-left: 1rpx solid #D9D9D9;.weui-grid position: rela

13、tive;float: left;padding: 20rpx 20rpx;width: 20%;box-sizing: border-box;border-right: 1rpx solid #D9D9D9;border-bottom: 1rpx solid #D9D9D9;.weui-grid_active background-color: #ccc;.weui-grid_icon display: block;width: 100rpx;height: 100rpx;margin: 0 auto;box-shadow: 3px 3px 5px #bbb;.weui-grid_label

14、 margin-top: 5px;display: block;text-align: center;color: #000000;font-size: 14px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;6. selectColor.js javascript view plain copy 在 CODE 上查看代码片派生到我的代码片 /selectColor.js/获取应用实例var app = getApp()Page(data: color: key: 1, color: 白色 , number: #FFF

15、FFF , key: 2, color: 红色 , number: #FF0000 , key: 3, color: 绿色 , number: #00FF00 , key: 4, color: 蓝色 , number: #0000FF , key: 5, color: 牡丹红 , number: #FF00FF , key: 6, color: 青色 , number: #00FFFF , key: 7, color: 黄色 , number: #FFFF00 , key: 8, color: 黑色 , number: #000000 , key: 9, color: 海蓝 , number:

16、 #70DB93 , key: 10, color: 巧克力色 , number: #5C3317 , key: 11, color: 蓝紫色 , number: #9F5F9F , key: 12, color: 黄铜色 , number: #B5A642 , key: 13, color: 亮金色 , number: #D9D919 , key: 14, color: 棕色 , number: #A67D3D , key: 15, color: 青铜色 , number: #8C7853 , key: 16, color: 2 号青铜色 , number: #A67D3D , key: 1

17、7, color: 士官服蓝色 , number: #5F9F9F , key: 18, color: 冷铜色 , number: #D98719 , key: 19, color: 铜色 , number: #B87333 , key: 20, color: 珊瑚红 , number: #FF7F00 , key: 21, color: 紫蓝色 , number: #42426F , key: 22, color: 深棕 , number: #5C4033 , key: 23, color: 深绿 , number: #2F4F2F , key: 24, color: 深铜绿色 , numb

18、er: #4A766E , key: 25, color: 深橄榄绿 , number: #4F4F2F , key: 26, color: 深兰花色 , number: #9932CD , key: 27, color: 深紫色 , number: #871F78 , key: 28, color: 深石板蓝 , number: #6B238E , key: 29, color: 深铅灰色 , number: #2F4F4F , key: 30, color: 深棕褐色 , number: #97694F , key: 32, color: 深绿松石色 , number: #7093DB ,

19、 key: 33, color: 暗木色 , number: #855E42 , key: 34, color: 淡灰色 , number: #545454 , key: 35, color: 土灰玫瑰红色 , number: #856363 , key: 36, color: 长石色 , number: #D19275 , key: 37, color: 火砖色 , number: #8E2323 , key: 38, color: 森林绿 , number: #238E23 , key: 39, color: 金色 , number: #CD7F32 , key: 40, color: 鲜

20、黄色 , number: #DBDB70 , key: 41, color: 灰色 , number: #C0C0C0 , key: 42, color: 铜绿色 , number: #527F76 , key: 43, color: 青黄色 , number: #93DB70 , key: 44, color: 猎人绿 , number: #215E21 , key: 45, color: 印度红 , number: #4E2F2F , key: 46, color: 土黄色 , number: #9F9F5F , key: 47, color: 浅蓝色 , number: #C0D9D9

21、, key: 48, color: 浅灰色 , number: #A8A8A8 , key: 49, color: 浅钢蓝色 , number: #8F8FBD , key: 59, color: 浅木色 , number: #E9C2A6 , key: 60, color: 石灰绿色 , number: #32CD32 , key: 61, color: 桔黄色 , number: #E47833 , key: 62, color: 褐红色 , number: #8E236B , key: 63, color: 中海蓝色 , number: #32CD99 , key: 64, color:

22、 中蓝色 , number: #3232CD , key: 65, color: 中森林绿 , number: #6B8E23 , key: 66, color: 中鲜黄色 , number: #EAEAAE , key: 67, color: 中兰花色 , number: #9370DB , key: 68, color: 中海绿色 , number: #426F42 , key: 69, color: 中石板蓝色 , number: #7F00FF , key: 70, color: 中春绿色 , number: #7FFF00 , key: 71, color: 中绿松石色 , number: #70DBDB , key