WeChat-Applet zur automatischen Videowiedergabe imitiert Beispiel eines GIF-Animationseffekts

<view class="container" style="Breite: {{videoWidth}}rpx;Höhe: {{videoHeight}}rpx">
  <image class="image" style="Sichtbarkeit: {{play ? 'hidden' : 'sichtbar'}};" id="image_{{videoId}}" src="{{poster}}" />
  <video class="video" wx:if="{{play}}" id="video_{{videoId}}" controls="{{controls}}" object-fit='enthalten' show-center-play-btn="{{showCenterPlayBtn}}" enable-progress-gesture="{{enableProgressGesture}}" direction="{{direction}}" enable-play-gesture="{{enablePlayGesture}}" muted="{{muted}}" loop="{{loop}}" src="{{videoUrl}}" />
</Ansicht>

.container {
    Position: relativ;
    Breite: 100 %;
    Höhe: 100%;
}
.Bild {
    Position: absolut;
    oben: 0;
    links: 0;
    rechts: 0;
    unten: 0;
    Z-Index: 10;
    Breite: 100 %;
    Höhe: 100%;
}
.video {
    Breite: 100 %;
    Höhe: 100%;
}

Komponente({
    Eigenschaften:
        // Videobreite videoWidth: {
            Typ: Nummer,
            Wert: 0,
        },
        // Videohöhe videoHeight: {
            Typ: Nummer,
            Wert: 0,
        },
        // Videoposter/Coverposter: {
            Typ: Zeichenfolge,
            Wert: '',
        },
        // Videolink videoUrl: {
            Typ: Zeichenfolge,
            Wert: '',
        },
        // Ob die Steuerelemente des Wiedergabefortschrittsbalkens angezeigt werden sollen: {
            Typ: Boolean,
            Wert: false,
        },
        // Ob die mittlere Wiedergabetaste angezeigt werden soll showCenterPlayBtn: {
            Typ: Boolean,
            Wert: false,
        },
        // Ist es stummgeschaltet: {
            Typ: Boolean,
            Wert: true,
        },
        // Ob die Stummschalttaste angezeigt werden soll showMuteBtn: {
            Typ: Boolean,
            Wert: true,
        },
        // Ob die Gestensteuerung für den Fortschritt aktiviert werden soll enableProgressGesture: {
            Typ: Boolean,
            Wert: false,
        },
        // Ob die Wiedergabe per Gestensteuerung aktiviert werden soll enablePlayGesture: {
            Typ: Boolean,
            Wert: false,
        },
        // Richtung: {
            Typ: Nummer,
            Wert: 0,
        },
        //Geben Sie die Startzeit der Wiedergabe in Sekunden an. showPlayTime: {
            Typ: Nummer,
            Wert: 0,
        },
        // Video-ID (eindeutige Kennung)
        Video-ID: {
            Typ: Zeichenfolge,
            Wert: '',
        },
        // Ob gespielt werden soll play: {
            Typ: Boolean,
            Wert: false,
        },
        //Ob die Wiedergabe in einer Schleife erfolgen soll: {
            Typ: Boolean,
            Wert: true,
        },
    },
    Daten: {
        paly: false, // Ob der Kontext abgespielt werden soll: null, // Das erstellte Video-Instanzobjekt},
    Lebensdauern:
        beigefügt() {
            this.videObserve();
        },
    },
    Methoden: {
        // Überwachen, ob die Videokomponente in den sichtbaren Bereich eintritt videObserve() {
            dieser._observer = dieser.createIntersectionObserver({
                observeAll: wahr,
            });

            this._observer.relativeToViewport().observe(`#image_${this.data.videoId}`, (res) => {
                //res.intersectionRatio === 0 bedeutet keine Schnittmengewenn (res.intersectionRatio === 0) {
                    dies.setData({
                        spielen: falsch,
                    });
                } anders {
                    const ctx = this.data.context || wx.createVideoContext(`video_${this.data.videoId}`, this);
                    wenn (ctx) {
                        dies.setData(
                            {
                                Kontext: ctx,
                                spielen: wahr,
                            },
                            () => {
                                // Die Verzögerung besteht darin, zu warten, bis der wxml-Knoten erstellt wurde, und ihn dann nach Erhalt des Knotens abzuspielen, da sonst die Wiedergabe möglicherweise fehlschlägt setTimeout(() => {
                                    ctx.spielen();
                                }, 400);
                            }
                        );
                    }
                }
            });
        },
    },
});