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

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

发送弹幕 

 

WXML文件代码如下：

 

1

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

​

WXSS文件代码如下:

 

1

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

 

JS文件代码如下：

 

1

<br>// pages/video/video.js<br>// 弹幕随机颜色函数<br>function getRandomColor() {<br>  const rgb = []<br>  for (let i = 0; i < 3; ++i) {<br>    let color = Math.floor(Math.random() * 256).toString(16)<br>    color = color.length === 1 ? '0' + color : color<br>    rgb.push(color)<br>  }<br>  return '#' + rgb.join('')<br>}<br> <br>let video = null<br>let inputvalue = ""<br> <br>Page({<br>  data: {<br>    danmuList: [<br>      {<br>        text: '微信小程序',<br>        time: 1,<br>        color: '#ffffff'<br>      },<br>      {<br>        text: 'video组件',<br>        time: 2,<br>        color: '#000000'<br>      },<br>      {<br>        text: '弹幕功能',<br>        time: 3,<br>        color: '#0086ea'<br>      }<br>    ]<br>  },<br>  Danmu(event) {<br>    inputvalue = event.detail.value<br>  },<br>  sendDanmu() {<br>    video.sendDanmu({<br>      text: inputvalue,<br>      color: getRandomColor()<br>    })<br>  },<br>  //  生命周期函数--监听页面初次渲染完成<br>  onReady: function () {<br>    video = wx.createVideoContext('danmucontext')<br>  },<br>})

 

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