把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?
先上gif:
再上几张图:
1.视频播放器
2.选择弹幕颜色
3.弹幕来了...
1.视频播放器
微信已经封装的非常好.我这里只用了很简单的几个属性
由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.
弹幕列表的元素:
其他的属性就不说了,以后遇到再细细研究.
2.选择弹幕颜色
从上面的弹幕列表元素可以看出,微信并没有给开发者太多的自定义空间.文本?时间?颜色?
也就颜色还能玩出点花样吧.
于是我就简单的做了个常用颜色的列表.算是自定义弹幕颜色吧
上代码:
ps:代码没整理,很烂,凑活着看吧.
1.index.wxml
<button style="margin:30rpx;" bindtap="bindSendDanmu">发送弹幕
2.index.wxss
(从别的项目粘过来的.哈哈)
}
.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
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
5.selectColor.wxss
}
.weui-grid__label {
margin-top: 5px;
display: block;
text-align: center;
color: #000000;
font-size: 14px;
white-space: Nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
6.selectColor.js
},//点击后关闭选色页面
selectColor: function (e) {
var number = e.currentTarget.dataset.number;
console.log("number: " + number)
try {
wx.setStorageSync('numberColor',number)
} catch (e) {
}
wx.navigateBack({
delta: 1,// 回退前 delta(默认为1) 页面
success: function (res) {
// success
},complete: function () {
// complete
}
})
}
})
