WeChat Mini Program video barrage position random

This article shares the specific code for randomizing the position of the WeChat mini program video barrage for your reference. The specific content is as follows

After the development tools were recently updated, the barrage of WeChat mini-program videos is no longer automatically random, so a tricky method was used (sending multiple empty barrages together with the barrage you want to send, and using random numbers to control the order);

wxml code

<!--pages/study/video/videoplay/videoplay.wxml-->
<view class="page-body">
  <view class="page-section tc">
    <video 
      id="myVideo" 
      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 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      Controls
      picture-in-picture-mode="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
    ></video>
    <view style="margin: 30rpx auto" class="weui-label">Bullet comment content</view>
    <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="Enter the bullet content here" />
    <button style="margin: 30rpx auto" bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">Send Danmu</button>
    <navigator style="margin: 30rpx auto" url="picture-in-picture" hover-class="other-navigator-hover">
      <button type="primary" class="page-body-button" bindtap="bindPlayVideo">Small window mode</button>
    </navigator>
  </view>
</view>

js code

// pages/study/video/videoplay/videoplay.js
var that;
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('')
}
 
Page({
  onShareAppMessage() {
    return {
      title: 'video',
      path: 'page/component/pages/video/video'
    }
  },
 
  onReady() {
    that = this;
    this.videoContext = wx.createVideoContext('myVideo')
  },
 
  onHide() {
 
  },
 
  inputValue: '',
  data: {
    src: '',
    danmuList:
    [{
      text: 'The first bullet comment',
      color: '#ff0000',
      time: 1
    }, {
      text: 'The barrage that appeared in the 3rd second',
      color: '#ff00ff',
      time: 3
    }],
  },
 
  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },
 
  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
 
  bindVideoEnterPictureInPicture() {
    console.log('Enter small window mode')
  },
 
  bindVideoLeavePictureInPicture() {
    console.log('Exit small window mode')
  },
 
  bindPlayVideo() {
    this.videoContext.play()
  },
  bindSendDanmu() {
    // Use loops and random numbers to adjust the position var ranNum = Math.floor(Math.random()*10);
    var danmuList = [];
    for (let index = 0; index < 10; index++) {
      danmuList.push('');
    }
    danmuList[ranNum] = this.inputValue;
    for (let index = 0; index < danmuList.length; index++) {
      this.videoContext.sendDanmu({
        text: danmuList[index],
        color: '#ff0000'
      });
    }
  },
 
  videoErrorCallback(e) {
    console.log('Video error message:')
    console.log(e.detail.errMsg)
  }
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat applet implements video player sending bullet screen
Implementation of the video barrage sending function in WeChat applet
WeChat applet development video player Video barrage barrage color customization example
WeChat mini program vidao realizes the functions of video playback and barrage

<<: MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)

>>: Simple steps to configure Nginx reverse proxy with SSL