WeChat applet uses the video player video component

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

Recommend

How to modify the default encoding of mysql in Linux

During the development process, if garbled charac...

5 commonly used objects in JavaScript

Table of contents 1. JavaScript Objects 1).Array ...

Monitor changes in MySQL table content and enable MySQL binlog

Preface binlog is a binary log file, which record...

Detailed explanation of MySQL database isolation level and MVCC

Table of contents 1. Isolation Level READ UNCOMMI...

JS canvas realizes the functions of drawing board and signature board

This article shares the specific code of JS canva...

MySQL 8.0 New Features - Introduction to Check Constraints

Table of contents Preface Check Constraints Creat...

JavaScript data structure bidirectional linked list

A singly linked list can only be traversed from t...

Detailed explanation of storage engine in MySQL

MySQL storage engine overview What is a storage e...

MySQL enables slow query (introduction to using EXPLAIN SQL statement)

Today, database operations are increasingly becom...

js+Html to realize table editable operation

This article shares the specific code of js+Html ...

How to run Spring Boot application in Docker

In the past few days, I have studied how to run s...

Zabbix configuration DingTalk alarm function implementation code

need Configuring DingTalk alarms in Zabbix is ​​s...

Mybatis paging plug-in pageHelper detailed explanation and simple example

Mybatis paging plug-in pageHelper detailed explan...

WeChat applet realizes the function of uploading pictures

This article example shares the specific code for...