위 챗 애플 릿 자동 재생 영상 모방 gif 동 영상 효과 인 스 턴 스 구현

필요 한 배경:
애플 릿 페이지 에 gif 동적 그림 을 삽입 하지만 gif 그림 은 일반적으로 부피 가 크 고 자동 으로 동 영상 을 재생 하 는 모드 로 gif 그림 의 효 과 를 모 의 하여 풍부 한 페이지 를 보 여 줍 니 다.자동 으로 재생 되 는 동 영상,컨트롤 바,소리 없 이 자동 으로 반복 재생 됩 니 다.
기술 난점:
위 챗 애플 릿 이 같은 페이지 에 여러 개의 동 영상 이 존재 할 때(3 개 이상 의 동 영상 을 권장 하지 않 음)렉 이 걸 리 거나 깜빡 거 리 는 경우 가 있 기 때문이다.
developers.weixin.qq.com/community/d …
프로젝트:
애플 릿 커 뮤 니 티 토론 방안 을 참고 하여 영상 이 화면 시각 영역 에 나타 나 지 않 았 을 때 그림 으로 자 리 를 차지 하고 화면 에 나타 나 그림 을 영상 으로 교체 하고 자동 으로 재생 합 니 다.
코드 주의 점:
video 라벨 은 wx:if 로 제어 하고 image 라벨 은 visibility 스타일 로 자 리 를 차지 합 니 다.

<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}}" />
</view>

.container {
    position: relative;
    width: 100%;
    height: 100%;
}
.image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.video {
    width: 100%;
    height: 100%;
}

Component({
    properties: {
        //     
        videoWidth: {
            type: Number,
            value: 0,
        },
        //     
        videoHeight: {
            type: Number,
            value: 0,
        },
        //     /   
        poster: {
            type: String,
            value: '',
        },
        //     
        videoUrl: {
            type: String,
            value: '',
        },
        //          
        controls: {
            type: Boolean,
            value: false,
        },
        //           
        showCenterPlayBtn: {
            type: Boolean,
            value: false,
        },
        //     
        muted: {
            type: Boolean,
            value: true,
        },
        //         
        showMuteBtn: {
            type: Boolean,
            value: true,
        },
        //           
        enableProgressGesture: {
            type: Boolean,
            value: false,
        },
        //           
        enablePlayGesture: {
            type: Boolean,
            value: false,
        },
        //   
        direction: {
            type: Number,
            value: 0,
        },
        //         ，  ： 
        showPlayTime: {
            type: Number,
            value: 0,
        },
        //   id（    ）
        videoId: {
            type: String,
            value: '',
        },
        //     
        play: {
            type: Boolean,
            value: false,
        },
        //       
        loop: {
            type: Boolean,
            value: true,
        },
    },
    data: {
        paly: false, //     
        context: null, //          
    },
    lifetimes: {
        attached() {
            this.videObserve();
        },
    },
    methods: {
        //               
        videObserve() {
            this._observer = this.createIntersectionObserver({
                observeAll: true,
            });

            this._observer.relativeToViewport().observe(`#image_${this.data.videoId}`, (res) => {
                // res.intersectionRatio === 0     
                if (res.intersectionRatio === 0) {
                    this.setData({
                        play: false,
                    });
                } else {
                    const ctx = this.data.context || wx.createVideoContext(`video_${this.data.videoId}`, this);
                    if (ctx) {
                        this.setData(
                            {
                                context: ctx,
                                play: true,
                            },
                            () => {
                                //        wxml     ，       ，           
                                setTimeout(() => {
                                    ctx.play();
                                }, 400);
                            }
                        );
                    }
                }
            });
        },
    },
});

효과 도
영상 이 시각 영역 에 들 어가 서 야 영상 을 불 러 와 재생 하기 시작 했다.영상 은 시각 영역 에서 벗 어 나 play=false,video 탭 을 지우 면 영상 을 지 웁 니 다.

미래 최적화 점
현재 동 영상 이 렌 더 링 을 시작 할 때 블랙 스크린 효과 가 나타난다.나중에 흰색(흰색 이 검은색 보다 조금 더 잘 받 아들 일 수 있 는 지)으로 바 꿀 수 있 는 지,애플 릿 영상 지원 상황 도 봐 야 한다.
현재 한 화면 을 제한 하지 않 고 3 개의 동 영상 을 동시에 재생 할 수 없다.동 영상 너비 가 작 으 면 동 영상 이 많이 나 와 렉 이 걸 리 거나 반 짝 일 수 있다.
총결산
위 챗 애플 릿 이 gif 동 영상 모방 효 과 를 자동 으로 재생 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 애플 릿 이 동 영상 모방 gif 동 영상 내용 을 자동 으로 재생 합 니 다.예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많이 응원 해 주세요!