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

Vue implements upload component

Table of contents 1. Introduction 2. Ideas Two wa...

JavaScript implementation of carousel example

This article shares the specific code for JavaScr...

MySQL tutorial data definition language DDL example detailed explanation

Table of contents 1. Introduction to the basic fu...

Solution to the conflict between nginx and backend port

question: When developing the Alice management sy...

Code comment writing standards during web page production

<br />I have summarized the annotation writi...

A brief analysis of React Native startReactApplication method

In this article, we sorted out the startup proces...

Detailed explanation of the difference between var, let and const in JavaScript

Table of contents As a global variable Variable H...

How to fill items in columns in CSS Grid Layout

Suppose we have n items and we have to sort these...

JS implements a simple todoList (notepad) effect

The notepad program is implemented using the thre...

How to install common components (mysql, redis) in Docker

Docker installs mysql docker search mysql Search ...

Introduction to MySQL isolation level, lock and MVCC

This article aims to clarify the relationship bet...

WeChat applet uses the video player video component

This article example shares the specific code of ...

Example of how to create a database name with special characters in MySQL

Preface This article explains how to create a dat...