wxml
<!--index.wxml-->
<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>
<view class="colorstyle" bindtap="selectColor">
<text>选择颜色</text>
<view style="height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}"></view>
</view>
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;
}
.vertical {
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
js
// pages/video.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({
/**
* 页面的初始数据
*/
data: {
inputValue: '',//输入的弹幕
isRandomColor: true,//默认随机
src: '',
numberColor: "#ff0000",//默认黑色
danmuList: [
{
text: '第 1s 出现的红色弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 2s 出现的绿色弹幕',
color: '#00ff00',
time: 2
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
wx:wx.getSystemInfo({
success: (result) => {
var videoWidth= result.windowWidth;
var videoHeight=(255 / 300) * videoWidth
that.setData({
videoWidth:videoWidth,
videoHeight:videoHeight
})
console.log(result)
},
})
},
onReady:function(res){
this.videoContext=wx.createVideoContext('myVideo')
},
onShow:function(res){
var that = this
wx.getStorage({
key: 'numberColor',
success:function(res){
that.setData({
numberColor:res.data
})
}
})
},
bindInputBlur:function(res){
this.setData({
inputValue:res.detail.value
})
console.log(res)
},
bindSendDanmu:function(res){
if(this.data.isRandomColor){
var color = getRandomColor();
}else{
var color = this.data.numberColor;
}
this.videoContext.sendDanmu({
text:this.data.inputValue,
color:color
})
},
videoErrorCallback:function(res){
console.log(res)
},
//switch是否选中
switchChange:function(e){
this.setData({
isRandomColor:e.detail.value
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
/**
* 生命周期函数--监听页面显示
*/
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})