Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet

In diesem Artikel wird der spezifische Code für das WeChat-Applet zur Implementierung eines Videoplayers, der Sperrfeuer sendet, zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Videoplayer

Video-Detail Video-Player
Farbe auswählen Sperrfeuer senden

1. Seitenerstellung

2. Wählen Sie die Farbe des Aufzählungsbildschirms

3. Einsatz von Video-Plugins

4. Zugehöriger Code

app.json

//app.json
{
  "Seiten":[
    "Seiten/Video-Detail/Video-Detail",
    "Seiten/Farbe auswählen/Farbe auswählen",
    "Seiten/Index/Index",
    "Seiten/Protokolle/Protokolle"
  ],
  "Fenster":{
    "HintergrundTextStil":"hell",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Videoplayer",
    "navigationBarTextStyle":"schwarz"
  },
  "Stil": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
.container {
  Höhe: 100%;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 200rpx 0;
  Box-Größe: Rahmenbox;
}

2. Video-Detail-Videoplayer-bezogener Seitencode

video-detail.wxml

<!--pages/video-detail/video-detail.wxml-->
<Klasse anzeigen="Hauptinhalt">
    <Ansichtsklasse="Hauptliste">
        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id && current_id == videoDetail.id}}">
            <Klasse anzeigen="Video">
                <video class="videoContent" id="videoId" show-center-play-btn="true" autoplay="true"
                    danmu-list="{{danmuList}}" danmu-btn aktivieren-danmu
                 src="{{videoDetail.videoUrl}}" Objekt-fit="füllen" bindfullscreenchange="fullscreenchange"></video>
            </Ansicht>
        </Ansicht>
        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id =='' || current_id != videoDetail.id}}">
            <Klasse anzeigen="Video">
                <image class="playImg" src="/images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
                <image class="videoContent" src="{{videoDetail.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
            </Ansicht>
        </Ansicht>
    </Ansicht>
    <!--Bullet-Bildschirm-->
    <Ansichtsklasse="danmu">
        <Ansichtsklasse="danmu-input">
            <input class="weui-input" type="text" placeholder="Bitte rufen Sie den Bullet-Screen auf" bindblur="bindInputblur"/>
        </Ansicht>
        <Ansichtsklasse="danmu-btn">
            <button type="primary" bindtap = "bindSendDanmu">Sende Danmu</button>
        </Ansicht>
        <Ansichtsklasse="danmu-color">
            <Ansichtsklasse="danmu-color-switch">
                <view class="weui-cell-bd">Zufällige Farbe</view>
                <Ansichtsklasse="weui-cell-ft">
                    <switch aktiviert="true" Typ="switch" bindchange="switchChange"></switch>
                </Ansicht>
            </Ansicht>
            <view class="danmu-color-select" bindtap = "Farbe auswählen">
                <view class="weui-cell-bd">Farbe auswählen</view>
                <Ansichtsklasse="weui-cell-ft">
                    <view Klasse = "selectColor" Stil = "Hintergrundfarbe: {{numberColor}};"></view>
                </Ansicht>
            </Ansicht>
        </Ansicht>
    </Ansicht>
</Ansicht>

video-detail.wxss

.mainContent{
  Hintergrund: #ffffff;
  Überlauf: automatisch;
}
.mainList{
  Breite: 100 %;
  Hintergrund: #ffffff;
  Höhe: 396rpx;
}
.Video{
  Breite: 94 %;
  Höhe: 324rpx;
  Rand links: 20rpx;
  Position: relativ;
}
.videoContent{
  Breite: 100 %;
  Höhe: 324rpx;
}
/*Kleines Abspielsymbol*/
.playImg{
  Position: absolut;
  oben: 46 %;
  links: 46 %;
  Breite: 64rpx;
  Höhe: 64rpx;
}
/*Bullet-Bildschirm*/
.danmu{
  Breite: 100 %;
}
.danmu-Eingabe{
  Breite: 100 %;
  Höhe: 60rpx;
}
.weui-Eingabe{ 
  Anzeige: Flex;
  Breite: 94 %;
  Höhe: 60rpx;
  Elemente ausrichten: zentrieren;
  Rand links: 20rpx;
  Rahmenradius: 8rpx;
  Rand: 2rpx durchgezogen #cccccc;
  Polsterung links: 10rpx;
  Schriftgröße: 28rpx;
}
.danmu-btn{
  Breite: 100 %;
  Rand oben: 20rpx;
}
.danmu-Farbe{
  Breite: 100 %;
  Rand oben: 20rpx;
  Rahmen oben: 2rpx durchgezogen #cccccc;
}
.danmu-Farbschalter, .danmu-Farbauswahl{
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  justify-content: space-between;/*Beide Enden ausrichten*/
  Elemente ausrichten: zentrieren;
  Rand: 20rpx 20rpx 0 20rpx;
}
.weui-cell-bd{
  Schriftgröße: 28rpx;
}
.weui-cell-ft{
  Schriftgröße: 28rpx;
}
.Farbe auswählen{
  Breite: 80rpx;
  Höhe: 80rpx;
  Zeilenhöhe: 100rpx;
}

video-detail.js

// Seiten/Video-Detail/Video-Detail.js
Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    current_id:'', //aktuell abgespielte Video-ID
    videoDetail:{
      ID: "1",
      "videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4",
      "Poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"
    },
    //danmuListe:[
      {
        Text: 'Der rote Bullet-Bildschirm, der in der ersten Sekunde erscheint',
        Farbe: '#ff0000',
        Zeit: 1
      },
      {
        Text: 'Der grüne Bullet-Bildschirm, der in der zweiten Sekunde erscheint',
        Farbe: '#00ff00',
        Zeit: 2
      },
      
    ],
    isRandomColor: true, //Standard-ZufallszahlFarbe: "#ff0000", //Standard-Rot-Eingabewert: "", //Inhalt des Textfelds für die Eingabe},

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
    
  },  
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion(){
    wenn (wx.getStorageSync('Farbe')) {
      dies.setData({
        AnzahlFarbe: wx.getStorageSync('Farbe')
      })
    }
  },
  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {
    this.videoContext = wx.createVideoContext("videoId")
  },
  //Videoliste Klickereignis videoPlay:function(e){
    console.log(e)
    var id = e.currentTarget.dataset.index
    var currentId=e.currentTarget.id
    dies.setData({
      current_id: aktuelleID
    })
    var videoContext = wx.createVideoContext(id)
    videoContext.abspielen()
  },
  //Textfeld verliert Fokusereignis bindInputblur: function(e){
    // konsole.log(e.detail.wert)
    dieser.Daten.Eingabewert = e.Detail.Wert
  },
  //Sende den Inhalt des Bullet-Screens bindSendDanmu : function (e) {
    //Farbe des Sperrfeuers festlegen var color=""
    if(this.data.isRandomColor){//Zufällige Farbe color = this.getRandomColor()
    }anders{
      Farbe = diese.Daten.ZahlFarbe
    }
    //Senden Sie Danmuthis.videoContext.sendDanmu({
      Text: dieser.Daten.Eingabewert,
      Farbe: Farbe
    })
  },
  //Zufällige Farbe festlegen getRandomColor(){
    lass rgb = []
    für (lass 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('')
  },
  //Schalter Schalter Ereignis switchChange: function(e){
    console.log(e)
    this.data.isRandomColor = e.detail.value

  },
  //Farbe auswählen selectColor:function(){
    wx.navigateTo({
      URL: '/Seiten/Farbe auswählen/Farbe auswählen'
    })
  }
})

3. select-color sendet Sperrfeuer-bezogenen Seitencode

Farbe auswählen.wxml

<!--pages/Farbe auswählen/Farbe auswählen.wxml-->
<Klasse anzeigen="Seite">
    <Ansichtsklasse="page_bd">
        <Klasse anzeigen="Farbelemente">
            <block wx:for="{{colorItems}}">
                <view class="item" data-number="{{item.number}}" bindtap = "Farbe auswählen">
                    <view class="item-icon" style="Hintergrund: {{item.number}};"></view>
                </Ansicht>
            </block>
        </Ansicht>
    </Ansicht>
</Ansicht>

Farbe auswählen.wxss

/* Seiten/Farbe auswählen/Farbe auswählen.wxss */
.Farbelemente{
  Rahmen oben: 1rpx durchgezogen #d9d9d9;
  Rahmen links: 1rpx durchgezogen #d9d9d9;
}
.Artikel{
  Position: relativ;
  schweben: links;
  Polsterung: 20rpx; 
  Breite: 20 %;
  Box-Größe: Rahmenbox;
  Rand rechts: 1rpx durchgezogen #d9d9d9;
  Rahmen unten: 1rpx durchgezogen #d9d9d9;
}
.item-icon{
  Anzeige: Block;
  Breite: 100rpx;
  Höhe: 100rpx;
  Rand: 0 automatisch;
  Kastenschatten: 3px 3px 5px #bbbbbb;
}

Farbe auswählen.js

// Seiten/Farbe auswählen/Farbe auswählen.js
Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Farbelemente: [
      { Schlüssel: 1, Farbe: 'weiß', Nummer: '#FFFFFF' },

      { Schlüssel: 2, Farbe: 'rot', Nummer: '#FF0000' },

      { Schlüssel: 3, Farbe: 'grün', Nummer: '#00FF00' },

      { Schlüssel: 4, Farbe: 'blau', Nummer: '#0000FF' },

      { Schlüssel: 5, Farbe: ‚Pfingstrose Rot‘, Nummer: ‚#FF00FF‘ },

      { Schlüssel: 6, Farbe: 'Cyan', Nummer: '#00FFFF' },

      { Schlüssel: 7, Farbe: 'gelb', Nummer: '#FFFF00' },

      { Schlüssel: 8, Farbe: 'schwarz', Nummer: '#000000' },

      { Schlüssel: 9, Farbe: 'Meeresblau', Nummer: '#70DB93' },

      { Schlüssel: 10, Farbe: 'Schokolade', Nummer: '#5C3317' },

      { Schlüssel: 11, Farbe: 'blau lila', Nummer: '#9F5F9F' },

      { Schlüssel: 12, Farbe: 'Messing', Nummer: '#B5A642' },

      { Schlüssel: 13, Farbe: 'helles Gold', Nummer: '#D9D919' },

      { Schlüssel: 14, Farbe: 'braun', Nummer: '#A67D3D' },

      { Schlüssel: 15, Farbe: 'Bronze', Nummer: '#8C7853' },

      { Schlüssel: 16, Farbe: ' Bronze Nr. 2', Nummer: '#A67D3D' },

      { Schlüssel: 17, Farbe: 'NCO-Blau', Nummer: '#5F9F9F' },

      { Schlüssel: 18, Farbe: 'kaltes Kupfer', Nummer: '#D98719' },

      { Schlüssel: 19, Farbe: 'Kupfer', Nummer: '#B87333' },

      { Schlüssel: 20, Farbe: 'Korallenrot', Nummer: '#FF7F00' },

      { Schlüssel: 21, Farbe: 'lila blau', Nummer: '#42426F' },

      { Schlüssel: 22, Farbe: 'dunkelbraun', Nummer: '#5C4033' },

      { Schlüssel: 23, Farbe: 'dunkelgrün', Nummer: '#2F4F2F' },

      { Schlüssel: 24, Farbe: 'Dunkelkupfergrün', Nummer: '#4A766E' },

      { Schlüssel: 25, Farbe: 'Dunkelolivgrün', Nummer: '#4F4F2F' },

      { Schlüssel: 26, Farbe: 'Dunkle Orchidee', Nummer: '#9932CD' },

      { Schlüssel: 27, Farbe: 'Dunkelviolett', Nummer: '#871F78' },

      { Schlüssel: 28, Farbe: ‚Dunkelschieferblau‘, Nummer: ‚#6B238E‘ },

      { Schlüssel: 29, Farbe: 'Dunkelbleigrau', Nummer: '#2F4F4F' },

      { Schlüssel: 30, Farbe: 'dunkelbraun', Nummer: '#97694F' },

      { Schlüssel: 32, Farbe: 'Dunkeltürkis', Nummer: '#7093DB' },

      { Schlüssel: 33, Farbe: ‚Dunkles Holz‘, Nummer: ‚#855E42‘ },

      { Schlüssel: 34, Farbe: 'hellgrau', Nummer: '#545454' },

      { key: 35, color: 'Staubgrau Rosenrot', number: '#856363' },

      { Schlüssel: 36, Farbe: 'Feldspat', Nummer: '#D19275' },

      { Schlüssel: 37, Farbe: 'Feuerziegelfarbe', Nummer: '#8E2323' },

      { Schlüssel: 38, Farbe: ‚Waldgrün‘, Nummer: ‚#238E23‘ },

      { Schlüssel: 39, Farbe: 'gold', Nummer: '#CD7F32' },

      { Schlüssel: 40, Farbe: 'hellgelb', Nummer: '#DBDB70' },

      { Schlüssel: 41, Farbe: 'grau', Nummer: '#C0C0C0' },

      { Schlüssel: 42, Farbe: 'Kupfergrün', Nummer: '#527F76' },

      { Schlüssel: 43, Farbe: 'Cyangelb', Nummer: '#93DB70' },

      { Schlüssel: 44, Farbe: ‚Hunter Green‘, Nummer: ‚#215E21‘ },

      { Schlüssel: 45, Farbe: 'Indischrot', Nummer: '#4E2F2F' },

      { Schlüssel: 46, Farbe: 'khaki', Nummer: '#9F9F5F' },

      { Schlüssel: 47, Farbe: 'hellblau', Nummer: '#C0D9D9' },

      { Schlüssel: 48, Farbe: 'hellgrau', Nummer: '#A8A8A8' },

      { Schlüssel: 49, Farbe: 'Hellstahlblau', Nummer: '#8F8FBD' },

      { Schlüssel: 59, Farbe: 'Helles Holz', Nummer: '#E9C2A6' },

      { Schlüssel: 60, Farbe: 'Hellgrün', Nummer: '#32CD32' },

      { Schlüssel: 61, Farbe: 'orange', Nummer: '#E47833' },

      { Schlüssel: 62, Farbe: 'kastanienbraun', Nummer: '#8E236B' },

      { Schlüssel: 63, Farbe: 'Mittelmeerblau', Nummer: '#32CD99' },

      { Schlüssel: 64, Farbe: 'mittelblau', Nummer: '#3232CD' },

      { Schlüssel: 65, Farbe: ‚Mittelwaldgrün‘, Nummer: ‚#6B8E23‘ },

      { Schlüssel: 66, Farbe: 'mittelhelles Gelb', Nummer: '#EAEAAE' },

      { Schlüssel: 67, Farbe: 'mittelorchidee', Nummer: '#9370DB' },

      { Schlüssel: 68, Farbe: 'Mittelmeergrün', Nummer: '#426F42' },

      { Schlüssel: 69, Farbe: ‚Mittelschieferblau‘, Nummer: ‚#7F00FF‘ },

      { Schlüssel: 70, Farbe: 'mittleres Frühlingsgrün', Nummer: '#7FFF00' },

      { Schlüssel: 71, Farbe: ‚Mitteltürkis‘, Nummer: ‚#70DBDB‘ },

      { Schlüssel: 72, Farbe: 'mittelviolett', Nummer: '#DB7093' },

      { Schlüssel: 73, Farbe: 'Mittlere Holzfarbe', Nummer: '#A68064' },

      { Schlüssel: 74, Farbe: 'Dunkelblau', Nummer: '#2F2F4F' },

      { Schlüssel: 75, Farbe: ‚Marineblau‘, Nummer: ‚#23238E‘ },

      { Schlüssel: 76, Farbe: 'Neon Basket', Nummer: '#4D4DFF' },

      { Schlüssel: 77, Farbe: ‚Neon Pink‘, Nummer: ‚#FF6EC7‘ },

      { Schlüssel: 78, Farbe: 'Neues Dunkelblau', Nummer: '#00009C' },

      { Schlüssel: 79, Farbe: ‚New Tan‘, Nummer: ‚#EBC79E‘ },

      { Schlüssel: 80, Farbe: 'Dunkelgoldgelb', Nummer: '#CFB53B' },

      { Schlüssel: 81, Farbe: 'orange', Nummer: '#FF7F00' },
    ]

  },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {

  },

  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {

  },
  //Klicken Sie, um eine Farbe auszuwählen selectColor(e){
    console.log(e)
    let Nummer = e.currentTarget.dataset.number
    //Lokal gespeichert wx.setStorageSync('Farbe', Zahl)
    //Zur vorherigen Seite zurückkehren wx.navigateBack({
      delta: 1, // Delta vor Rollback (Standard ist 1) Seite erfolgreich: function(res){
        // Erfolg
      },
      fehlgeschlagen: Funktion() {
        // scheitern
      },
      komplett: Funktion() {
        // vollständig
      }
    })
  }

})

4. Seitenimplementierungseffekt

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:

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
Das WeChat-Applet verwendet die Videoplayer-Videokomponente

<<: So installieren Sie Maven automatisch in der kontinuierlichen Integration von Linux

>>: Lösung für das MySQL-Anmeldewarnungsproblem