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

//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**/
.container {
  Höhe: 100%;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 200rpx 0;
  Box-Größe: Rahmenbox;
}

<!--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>

.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;
}

// 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'
    })
  }
})

<!--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>

/* 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;
}

// 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
      }
    })
  }

})