Cool H5 sequence image video playback of high performance realization

This article was posted on Tue, 01 May 2018, 19:12, categorized as JS instance. Read 3,631 times, 118 times today

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but need to retain the original author and source, the abstract drainage is optional.

First, the technical realization of the cool scene in the explosive H5

Every year, there are some great H5 models, and they usually have some cool scene changes.

For example, netease Julia H5. The idea is great and the communication effect is very wide. Its technical implementation is quite simple and crude, just a 3-minute video without pause:

Similar to the use of video H5 explosion there are many, is indeed a very good solution.

However, there are limitations to the implementation of video:

1. IOS does not automatically play and requires at least one touch of the screen, which is sometimes quite annoying. For example, when we want to create an H5 app flash screen, it hurts.
2. It is not possible to intersperse interactive effects in the middle. For example, when you need to pause a frame of video, hover or touch the mouse, the current screen has interactive effects, which is very difficult to deal with.
3. The rate of playback cannot be controlled arbitrarily, and the video is finished.
4. If some information is dynamic and needs to be associated with user information, then the video solution will also face great adjustment, because it is impossible for every user to generate a different video, and additional means are needed to meet the needs (such as CSS overlay positioning).

How to deal with it?

We can use sequence images, through JS scripts, to simulate the effect of video playback, all the above limitations can be avoided.

There are many ways to realize sequence image and video technology

There are many ways to realize sequence image video technology, such as:

1. Together on a larger picture, using CSS3animationcontrolbackground-positionAchieve the playback effect. This method has the advantage of being quick and convenient, but,background-positionThe positioning performance is not good, only suitable for small elements and small animation, such as some loading effects. If the large picture is switched in full screen, the lag can be obviously felt on mobile devices.
2. All in one big picture,transformPositioning. Performance still won’t hold up;
3. The images are placed on the page once, and the images are sequentially controlled. Performance has been improved, but if the image sequence is hundreds of frames and the image size is too large, the performance will still be broken, and the client may simply flash back.
4. One on the page<img>Elements, and then they keep changingsrcAddress, sorry, not very soon.

All in all, the above methods are feasible in theory, but the performance in practice is always unsatisfactory.

Is there a high-performance way to do that?

Yes, one is to use canvas drawing, but if you want to dynamically insert other UI-rich DOM structures (such as login module), it is more troublesome; There is also the following method, practice down the performance can be better experience, implementation cost is not high.

High performance implementation method of sequence image and video technology

The implementation principle is as follows:

1. Image DOM objects are preloaded and placed in memory;
2. At the beginning of playback, the page appends the current DOM image and removes the previous DOM image (if any) to ensure that there is only one image sequence element in the page.

Yes, it’s simple, no great tricks, but it’s this implementation strategy that has the least overhead on the page and the best running experience.

Seeing is believing, you can ruthlessly click here: sequence of pictures to achieve video playback effect demo

After loading, you can see a video of myself blowing a kiss:

If the effect is smooth and the experience is good, nine times out of ten people will think it is a video, but in fact it is not a picture, and the image DOM is constantly added and deleted to achieve similar video effect.

The core JS code is shown below (see demo for the complete code). Assuming that container is a container element, our image has been preloaded into the Store object with the following structure:

var store = {
    length: 47,
    1: img1,
    2: img2,
    ...
    47: img47    
};Copy the code

There are:

var index = 1; container.innerHTML = ''; Var step = function () {if (store[index-1]) {container.removechild (store[index-1]); } container.append(store[index]); // sequence increment index++; // If (index <= 47) {setTimeout(step, 42) = 24 frames per second; }}; step();Copy the code

Container. RemoveChild (store[index – 1]) removes the DOM from the previous frame. Container. Append (store[index]) inserts the DOM from the current frame. People’s naked eyes are used to continuously perceive things, so users have no perception of such deletion and addition, so the playback effect of a process is achieved. According to practice, even if each frame of picture is several hundred K, mainstream devices can hold it.

Since we’re essentially playing DOM objects, we can play not only the image DOM, but also the rich HTML structure of the

Now, the implementation of the technology has no restrictions on the design, the rest is the product and design ideas, the next blockbuster H5 is you!

3. Special skills: How to turn video into sequence pictures?

If your factory has a designer, let the designer deal with, basically, such as AE software should understand.

If there is no designer, the front-end partner to deal with their own, how to do?

For example, here’s what I did with the sequence images in this article:

1. Mobile phone video QQ to their own computer;
2. Open Photoshop, then: File – Import – Video Frame to layer, a window will appear to cut the video range you want to import;

   

   If you import a long video, it is recommended to edit it before importing it, unless you have an iMac Pro.

3. Without doing anything, just go file – Script – Export layer to file.
4. The node.js widget has been renamed in batches (the serial number behind the exported image name is the correct serial number). The JavaScript code used by the tool is as follows:

   var fs = require("fs"); fs.readdir('./', function(err, files) { files.forEach(function(filename) { if (/jpg$/.test(filename) == false) { return; } var oldPath = './' + filename, newPath = './' + filename.split(' ')[1]; Rename (oldPath, newPath, function() {console.log(filename + 'Rename successful! '); })}); })Copy the code

4. Other matters needing attention about performance

The human eye is much less capable of tracking than, say, a gorilla, so for real development, you don’t necessarily need 24 frames per second, you have 18 frames per second, for an H5 operation, the user is not aware. 18 frames per second can save a lot of request and load data, and improve performance. In balance, it is recommended, after all, we are not going to participate in an animation competition, it is an online Web product.

Designers like to use very high definition pictures, in fact, there is no need to pay attention to, 2 times the size, 30%~40% of the picture quality is enough, the effect is very good, this is also through practice, if you disagree with the designer, you can let her see this paragraph I wrote. Effectively reduce unnecessary picture size, can greatly save memory overhead, but also can improve the performance and quality of playback.

Therefore, three pronged: high-performance technology implementation strategy, appropriate reduction of frame rate, optimize the size of the picture, will help you H5 cool effect fluency, praise such as tide, boss praise!

This is the content of this article, thank you for reading, if there are inaccurate expressions in the article, welcome to correct!

CSS World
Display my exclusive purchase code

// Want a tip? Click here. Got something to say? Click here.

HTML5
To optimize the
Dynamic effect
Sequence of images
performance
video