点击上方“编程微刊”,选择“置顶公众号”
第一时间关注web前端技术干货!
在观看视频的时候视频弹幕是很常见的功能,当然在小程序中也不会例外,很多特效还没有成熟案例,只能原生重写,所以今天在分享个非常漂亮的视频弹幕特效。今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了,二当家要上图来啦!
快去拿个小板凳,坐等更多更新
注意:如若需要请联系微信geekxz
<!--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>
//index.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({
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
})
}
})
/**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;
}
注意路径问题
获取色彩选择页面数据请加 微信:geekxz
极客小寨:专注技术干货分享
围观
丨更多
热文
丨更多
热文
丨更多
热文