The progress bar is not smoothI believe that most front-end students have written audio and video players by themselves, and the implementation is not complicated. Recently, a requirement similar to watching videos on Weibo was created in a mini program. Some of the functions require the implementation of a custom progress bar. After completing the first version, I found that the progress bar was not smooth. Then I wanted to check online to see if there were any good solutions, but I didn’t find a suitable one in the end. So I wanted to see what the "Weibo" progress bar in the WeChat mini program looked like, and the result was also a very stiff animation. I put a GIF below. You can also search for Weibo in the WeChat mini program yourself and find a video to see the effect. Conventional solutionFinally, we decided to optimize this problem. Let's first review our existing conventional solutions.
The existing solution relies on events to obtain the current playback time, and this event is triggered approximately once every 100 to 350 milliseconds. The following is the event object queue of the applet I recorded. [ {"detail":{"currentTime":0.10509,"duration":5.83}}, {"detail":{"currentTime":0.364527,"duration":5.83}}, {"detail":{"currentTime":0.613648,"duration":5.83}}, ] The current problem is that every time an event is obtained, the progress bar is updated without any transition animation, which is very abrupt. The following is a progress bar change process with a total duration of 5s: Core code: const onProgress = (e, $dom) => { const updateFunc = (percent) => { $dom.style.width = percent+'%' } let percent = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1) updateFunc(percent) } transition We can quickly think of using CSS animation properties for optimization. If we want flexible control, I choose to use transition. Transition can define the execution duration of the animation. When we change the width, transition will change the width of the progress bar in an animated way within the specified time. First of all, the animation execution duration must be fixed, and it is best not to change the width before the previous execution duration ends, otherwise it will cause conflicts and the animation will become strange.
It sounds a bit hard to understand, let's draw a picture:
Core code: const playControl = { percent: 0, time: 0, duration: 0, first: true } const onProgress = (e, $dom) => { const updateFunc = (percent) => { playControl.percent = percent playControl.time = e.detail.currentTime $dom.style.width = percent+'%' } //The current video progress is updated for the first time if (playControl.first) { playControl.duration = e.detail.duration playControl.first = false updateFunc(100 / e.detail.duration / 2) } else { let percent = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1) if (percent - playControl.percent > 0 || e.detail.currentTime >= e.detail.duration) { updateFunc(percent) } } } Final effect comparison (PS: the gif image effect is compromised) The 60s version looks similar to the regular version? Block the other 60s and compare them back and forth, and you will find that there are still some differences. It’s still a bit hard to explain, or you still don’t understand? Go directly to the github repository code, the code can be run directly: https://github.com/zimv/smooth-progress This solution will have a short delay in some scenarios, such as pausing, dragging, etc. Personally, I think the advantages outweigh the disadvantages. This is the end of this article about the detailed solution for implementing the smooth version of the progress bar with JS. For more relevant content about the smooth version of the JS progress bar, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to choose the right index in MySQL
>>: How to configure Linux firewall and open ports 80 and 3306
The optimization created by MySQL is to add index...
The simple installation configuration of mysql5.7...
The methods and concepts of private filters and g...
Nginx can use its reverse proxy function to imple...
Table of contents What is Express middleware? Req...
1: Statement order of grouping function 1 SELECT ...
MySQL reports an error when executing multi-table...
In the process of Django web development, when wr...
Preface Vue provides a wealth of built-in directi...
Password Mode PDO::__construct(): The server requ...
MySQL allows you to create multiple indexes on th...
Have you ever had the need to compute a very larg...
1.Jenkins installation steps: https://www.jb51.ne...
Table of contents Preface 1. Key Elements of a Re...
I recently took over a small program project, and...