Das WeChat-Applet verwendet die Videoplayer-Videokomponente

Das WeChat-Applet verwendet die Videoplayer-Videokomponente

In diesem Artikelbeispiel wird der spezifische Code der Videoplayer-Komponente des WeChat-Applets zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Konfigurieren Sie Seitenrouting und Berechtigungen in app.json.

1.app.json

{
  "Seiten":[
    "Seiten/Video/Video"
],
"Erlaubnis": {
    "scope.writePhotosAlbum": {
      "desc": "Album lesen"
    }
  }
}

Verwenden der Videokomponente

2.video.wxml

<Ansicht Klasse="Abschnitt tc">
  <Video
    id="meinVideo"
    Quelle: „http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400“
    danmu-list="{{danmuList}}"
    aktivieren-danmu
    danmu-btn
    Bedienelemente
  ></video>
  <Ansichtsklasse="btn-area">
    <button bindtap="bindButtonTap">Video abrufen</button>
    <input bindblur="bindInputBlur" />
    <button bindtap="bindSendDanmu">Sende Danmu</button>
  </Ansicht>
</Ansicht>

3. audio.js

Funktion getRandomColor() {
  const rgb = []
  für (sei i = 0; i < 3; ++i) {
    lass Farbe = Math.floor(Math.random() * 256).toString(16)
    Farbe = Farbe.Länge == 1 ? '0' + Farbe : Farbe
    rgb.push(Farbe)
  }
  returniere '#' + rgb.join('')
}

Seite({
  beiBereit(res) {
    this.videoContext = wx.createVideoContext('meinVideo')
  },
  Eingabewert: '',
  Daten: {
    Quelle: '',
    danmuListe: [
      {
        Text: 'Der erste Aufzählungskommentar',
        Farbe: '#ff0000',
        Zeit: 1
      },
      {
        Text: 'Das Sperrfeuer, das in der 3. Sekunde auftrat',
        Farbe: '#ff00ff',
        Zeit: 3
      }]
  },
  bindInputBlur(e) {
    dieser.Eingabewert = e.Detail.Wert
  },
  bindButtonTap() {
    const das = dies
    wx.wählenVideo({
      Quelltyp: ['Album', 'Kamera'],
      maxDuration: 60,
      Kamera: ['vorne', 'hinten'],
      Erfolg(res) {
        dass.setData({
          Quelle: res.tempFilePath
        })
      }
    })
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      Text: dieser.Eingabewert,
      Farbe: getRandomColor()
    })
  }
})

Wirkung:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet
  • WeChat-Applet-Entwicklungsvideoplayer Beispiel für die Farbanpassung von Video-Barrage-Barrage
  • Das Video im WeChat-Applet implementiert eine benutzerdefinierte Wiedergabetaste, ein Titelbild und einen Video-Titeltext.
  • Das WeChat-Applet verwendet die Videokomponente zum Abspielen von Videofunktionen, Beispiel [mit Quellcode-Download]
  • Video zum WeChat-Miniprogramm: ausführliche Erklärung und einfache Beispiele
  • Detaillierte Erklärung der WeChat-Applet-Videokomponente
  • Beispiel für die Video-API des WeChat Mini-Programms – ausführliche Erläuterung
  • Detaillierte Erklärung und Beispielcode der Videokomponente des WeChat-Applets

<<:  Erklärung zur Verbindung des Mac mit Remote-Servern über SSH in verschiedenen Terminals

>>:  Installationsanleitung für MySQL 5.7.19 unter Windows 10 So ändern Sie das Root-Passwort von MySQL, nachdem Sie es vergessen haben

Artikel empfehlen

So verwenden Sie SHTML-Includes

Durch die Anwendung können einige öffentliche Bere...

Mysql speichert Baumstruktur durch Adjazenzliste (Adjazenzliste)

Der folgende Inhalt stellt den Prozess und die Lö...

js verwendet FileReader zum Lesen lokaler Dateien oder Blobs

Inhaltsverzeichnis FileReader liest lokale Dateie...

So schreiben Sie DROP TABLE in verschiedene Datenbanken

So schreiben Sie DROP TABLE in verschiedene Daten...

Kennen Sie die Bedeutung von Sonderzeichen in URLs?

1.# # stellt eine Position auf einer Webseite dar...

Grundlegende Verwendung und Beispiele von yum (empfohlen)

yum-Befehl Yum (vollständiger Name Yellow Dog Upd...

JavaScript-Funktion Currying

Inhaltsverzeichnis 1 Was ist Funktions-Currying? ...

CSS3 realisiert die Animation des Shuttle-Sternenhimmels

Ergebnis: html <canvas id="Sternenfeld&qu...

js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

In diesem Artikel wird der spezifische Code von j...

Erweiterte Docker-Methode zur schnellen Erweiterung

1. Befehlsmethode Führen Sie den Nginx-Dienst im ...