This article is by IMWeb IMWeb team

In the Penguin Tutorial brand page, we need to implement an animation as follows:

Scroll to the animation area and play the animation. The corresponding animation part is as follows:

Frame animation is currently implemented in the following ways:

  1. GIF animation

    Familiar image format

  2. lottie

    Airbnb open source project, through the analysis of AE animation into JSON data, support cross-platform animation effect solutions; Lottie has been used in tutoring. Students who have used Lottie praised and recommended its implementation effect and development speed. If you do not know Lottie, recommend Lottie series learning articles

  3. APNG (Animated Portable Network Graphics)

    PNG format extension based on an animation format, increased the support for animated images, its birth is to replace the old GIF format, but some browsers do not support, need to consider compatibility;

  4. HTML video elements

GIF animation is suitable for the processing of simple color, simple animation, such as logo, icon figure such small figure animation, in the above animation needs to achieve more obvious details, the area is also relatively large, considering the quality of GIF excluded

In terms of which way to realize the animation, combined with the research conclusion of my colleague @AjaxChen:

  1. After Lottie designers made animations through AE, they exported the animations to JSON for our front-end development through AE plug-in BodyMovin. In using this JSON data, We introduced Lottie – Web script to parse the JSON data and render it into SVG/Canvas animation. The effect is shown below, with Lottie on the left and our target on the right

It can be seen that there are still differences in implementation. The color, number tilt and dotted line perspective are not as expected, so We gave up Lottie, but this does not negate Lottie’s excellent effects in other animations

  1. APNG

    After the compression of the segmented animation frame pictures given by the designer, the apNG size is up to 29M, and the WebP format is up to 17M. Such a huge volume and the clarity can not reach the expectation, so we have to give up this method. Since APNG is not supported in some browsers, apng-canvas should be introduced to convert APNG to canvas.

  2. createJS

    After I sent the ISUX article “You are one article away from efficient Animation” to our design brother

    Then he wrote back

  1. HTML video

    After the above attempt failed, my colleague @zzbozheng showed me an LOL page. Amazingly, it was realized by video! Why didn’t I think of that!

Check the compatibility of the video label. Whether it is the PC version of our brand page or the mobile Web end, the compatibility can meet our needs

Design brother to animation MP4 video size is 350K, 350K compared to tens of megabits is simply light weight, check the automatic playback of the video, there are some pits, with the designer brother also communicated a comprehensive consideration after resolutely stepped on the pit of the video

The video tag has corresponding event methods. You can refer to the document

The following is a summary of pit mining in the process of using video on mobile terminal Web:

  1. Video may not play automatically in Safari or Chrome

    In this case, both the autoplay attribute of the video tag and the play method of calling the video automatically through js are autoplay

    Chrome autoplay on the desktop is subject to the Autoplay policy and can be played automatically if the policy is followed. This is based on user experience. A fraternal attribute was added to the video label because of the importance of a muted animation, which allows autoplay

<video muted />
Copy the code

  1. Hide the video control bar

    In video element, as long as you don’t add controls attribute, is generally not article display control, is that you don’t see a video, of course, some of the android browser is in a state of out of control, crossed | below mentioned ￣ | _

  2. IOS videos are automatically played in full screen

    Add two attributes to the video TAB to play in small screen

<video 
	muted
	playsInline
	webkit-playsinline="true"
/>
Copy the code

  1. Wechat does not allow videos to be played automatically, but only through user interaction

    At the beginning, some experienced colleagues reminded me to pay attention to the automatic video playing on wechat. After feedback from others, not only wechat is not allowed, but also some machine browsers are not allowed. What should I do at this time? Combined with the Touch event implementation. Video playback is to listen to scroll event and call video.play() to automatically play when it is in the visual range. Since some browsers need user interaction, you can select touch event. When the user touches this display and play area, Trigger the touch event to call play, where our animation area is large enough not to worry about the user’s touch failure. A variable is used to indicate whether the video has been played. If it has been played, the touch event is no longer executed to avoid frequent calls to Play

  2. Some Android browsers don’t play automatically, and touch events don’t trigger playback

    The play method of the video tag returns a promise that detects whether the video will play automatically

video.play()
  .then(() => {
    // play success
  })
  .catch( err => {
    // auto play fail
  })
Copy the code

When I catch an error, I can only enable the compatibility scheme. The design brother gave me several frames of pictures and asked me to fade in and out to realize the image playback.

In desperation, for android’S wechat terminal, all videos are enabled with compatible mode (several pictures fade in and out).

  1. On the weirdness of the Android browser
    1. Oppo machine video playback automatic suspension top

Me: “Design brother, I can’t do anything about it

Design: “Find all the models and browsers and play animations in compatible mode for those unsupported browsers

Me: “All of these models are really hard to control and cover all of them…

Design: “Use compatibility mode for all Androids first and optimize it later

So that killed all android VideoCopy the code
  1. After the ios QQ browser video is played, the recommended video is displayed

Determined by MTT - playsinline ="true"Copy the code
  1. There is a color difference between the background color of the video exported by the designer and the provided color, which is different in different PC devices, such as MAC and Windows. It has not been found in the mobile terminal for the time being, but the color difference between the video displayed on the mobile terminal and the PC can be found

The project uses the React technology stack

<video
   muted
   src="* * *"
   preload="auto"
   playsInline
   webkit-playsinline="true"
   mtt-playsinline="true"
   loop
   ref={this.videoRef}
/>
Copy the code
playVideo = () => { const { isVideoCanAutoPlay, isPlayedVideo } = this.state; // Const videoDom = this.videoref.current;if(videoDom && ! isPlayedVideo && isVideoCanAutoPlay) { const playPromise = videoDom.play();if (playPromise) {
        playPromise
          .then(() => {
            this.setState({
              isPlayedVideo: true}); }). Catch ((err) => {badjs.info(' [brand page][AI VIDEO animation]: auto play error${err}`); ++this.catchVideoErrorCount; // If the video cannot be played after clicking or scroll, use the compatibility solutionif (this.catchVideoErrorCount >= 2) {
              this.setState({
                isVideoCanAutoPlay: false}); }}); }}};Copy the code

Conclusion:

  1. The compatibility of mobile web for automatic video playback is very poor. Especially android, some browsers intercept the video tag and implement it in their own way, such as suspended top playback, conflict between two video screens, control bar that cannot be hidden, or default full screen playback. If you can animate in any other way try to animate in any other way

  2. For the automatic playback of video, consider that some browser restrictions can only be used through user interaction. If the video is on the first screen, it is a little difficult, and users still need to click to play. If it is not on the first screen, touch events can be triggered, after all, users will still trigger touch events when they pull down and scroll

  3. The promise returned by the play method of video exists in huawei Honor 8 wechat to return play successfully, but the video is not played

Reference documents and websites:

  1. Developer.mozilla.org/zh-CN/docs/…
  2. lol.qq.com/

Thanks to my colleagues who helped me in this pit mining process ~