把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?
先上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
}
})
}
})
demo代码下载：diodemo_jb51.rar">demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
