WeChat applet uses the video player video component

This article example shares the specific code of the video player component of the WeChat applet for your reference. The specific content is as follows

Configure page routing and permissions in app.json.

1.app.json

{
  "pages":[
    "pages/video/video"
],
"permission": {
    "scope.writePhotosAlbum": {
      "desc": "Read album"
    }
  }
}

Using the video component

2.video.wxml

<view class="section tc">
  <video
    id="myVideo"
    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    danmu-list="{{danmuList}}"
    enable-danmu
    danmu-btn
    Controls
  ></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">Get video</button>
    <input bindblur="bindInputBlur" />
    <button bindtap="bindSendDanmu">Send Danmu</button>
  </view>
</view>

3. audio.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('')
}

Page({
  onReady(res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  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
        })
      }
    })
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

Effect:

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
WeChat applet development video player Video barrage barrage color customization example
The video in WeChat applet implements custom play button, cover image, and video cover text
WeChat applet uses the video component to play video function example [with source code download]
WeChat Mini Program video detailed explanation and simple examples
Detailed explanation of the WeChat applet video component
WeChat Mini Program Video API Example Detailed Explanation
WeChat applet video component detailed explanation and example code

<<: Explanation of Mac connecting to remote servers through SSH in different terminals

>>: MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it