GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

<view class="container" style="width: {{videoWidth}}rpx;height: {{videoHeight}}rpx">
  <image class="image" style="visibility: {{play ? 'hidden' : 'visible'}};" id="image_{{videoId}}" src="{{poster}}" />
  <video class="video" wx:if="{{play}}" id="video_{{videoId}}" controls="{{controls}}" object-fit='contain' show-center-play-btn="{{showCenterPlayBtn}}" enable-progress-gesture="{{enableProgressGesture}}" direction="{{direction}}" enable-play-gesture="{{enablePlayGesture}}" muted="{{muted}}" loop="{{loop}}" src="{{videoUrl}}" />
</ビュー>

。容器 {
    位置: 相対的;
    幅: 100%;
    高さ: 100%;
}
。画像 {
    位置: 絶対;
    上: 0;
    左: 0;
    右: 0;
    下部: 0;
    zインデックス: 10;
    幅: 100%;
    高さ: 100%;
}
。ビデオ {
    幅: 100%;
    高さ: 100%;
}

成分（{
    プロパティ:
        // ビデオの幅 videoWidth: {
            タイプ: 数値、
            値: 0,
        },
        // ビデオの高さ videoHeight: {
            タイプ: 数値、
            値: 0,
        },
        // ビデオポスター/カバーポスター: {
            タイプ: 文字列、
            価値： ''、
        },
        // ビデオリンク videoUrl: {
            タイプ: 文字列、
            価値： ''、
        },
        // 再生進行状況バーコントロールを表示するかどうか: {
            タイプ: ブール値、
            値: false、
        },
        // 中央の再生ボタンを表示するかどうか showCenterPlayBtn: {
            タイプ: ブール値、
            値: false、
        },
        // ミュートされていますか: {
            タイプ: ブール値、
            値: true、
        },
        // ミュートボタンを表示するかどうか showMuteBtn: {
            タイプ: ブール値、
            値: true、
        },
        // ジェスチャーコントロールの進行を有効にするかどうか enableProgressGesture: {
            タイプ: ブール値、
            値: false、
        },
        // ジェスチャーコントロールの再生を有効にするかどうか enablePlayGesture: {
            タイプ: ブール値、
            値: false、
        },
        // 方向： {
            タイプ: 数値、
            値: 0,
        },
        //再生開始時間を秒単位で指定します showPlayTime: {
            タイプ: 数値、
            値: 0,
        },
        // ビデオ ID (一意の識別子)
        ビデオID: {
            タイプ: 文字列、
            価値： ''、
        },
        // 再生するかどうか play: {
            タイプ: ブール値、
            値: false、
        },
        //再生をループするかどうか loop: {
            タイプ: ブール値、
            値: true、
        },
    },
    データ： {
        paly: false, // 再生するかどうか context: null, // 作成されたビデオインスタンスオブジェクト},
    生涯:
        添付（） {
            this.videObserve();
        },
    },
    メソッド: {
        // ビデオコンポーネントが可視領域に入るかどうかを監視する videObserve() {
            this._observer = this.createIntersectionObserver({
                すべて観察: true、
            });

            this._observer.relativeToViewport().observe(`#image_${this.data.videoId}`, (res) => {
                //res.intersectionRatio === 0 は交差がないことを意味しますif (res.intersectionRatio === 0) {
                    this.setData({
                        再生: 偽、
                    });
                } それ以外 {
                    const ctx = this.data.context || wx.createVideoContext(`video_${this.data.videoId}`, this);
                    （ctx）の場合{
                        この.setData(
                            {
                                コンテキスト: ctx,
                                プレイ: 真、
                            },
                            () => {
                                // 遅延は wxml ノードが作成されるのを待ち、ノードを取得した後に再生します。そうしないと再生が失敗する可能性があります。setTimeout(() => {
                                    ctx.play();
                                }, 400);
                            }
                        );
                    }
                }
            });
        },
    },
});