直播电商平台开发，video组件实现视频弹幕功能

直播电商平台开发，video组件实现视频弹幕功能

发送弹幕 

 

WXML文件代码如下：

 

<!--pages/video/video.wxml-->
<video class="video" id="danmucontext" enable-danmu danmu-list="{{danmuList}}" danmu-btn controls
  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400">
</video>
<view class="danmu-box">
  <view class="danmu">
    <text class="txt">弹幕:</text>
    <input class="input" placeholder="请输入弹幕" bindinput="Danmu" />
    <button class="btn" bindtap="sendDanmu" size="mini" type="primary">发送</button>
  </view>
</view>

​

WXSS文件代码如下:

 

/* pages/video/video.wxss */
.video {
  width: 750rpx;
}
 
.danmu-box {
  display: flex;
  border: gray solid 1rpx;
  border-radius: 3%;
  margin: 0rpx 5rpx;
}
 
.danmu {
  display: flex;
  padding-left: 20rpx;
}
 
.txt {
  margin-top: 8rpx;
  padding-left: 30rpx;
}
 
.input {
  width: 400rpx;
  margin-top: 8rpx;
  padding: 0rpx 30rpx;
}

 

JS文件代码如下：

 

// pages/video/video.js
// 弹幕随机颜色函数
function getRandomColor() {
  const 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('')
}
 
let video = null
let inputvalue = ""
 
Page({
  data: {
    danmuList: [
      {
        text: '微信小程序',
        time: 1,
        color: '#ffffff'
      },
      {
        text: 'video组件',
        time: 2,
        color: '#000000'
      },
      {
        text: '弹幕功能',
        time: 3,
        color: '#0086ea'
      }
    ]
  },
  Danmu(event) {
    inputvalue = event.detail.value
  },
  sendDanmu() {
    video.sendDanmu({
      text: inputvalue,
      color: getRandomColor()
    })
  },
  //  生命周期函数--监听页面初次渲染完成
  onReady: function () {
    video = wx.createVideoContext('danmucontext')
  },
})

 

以上就是 直播电商平台开发，video组件实现视频弹幕功能，更多内容欢迎关注之后的文章