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