Different browsers may behave differently, and the page in this article is running under Chrome 91
The prototype
A list of video clips that play automatically when you hover over each block and pause when you move away.
Play scheme is very simple, is to use
The problem
Feedback received: browse videos one by one. The first few videos will be played soon after the mouse moves up, but the waiting time will be longer and longer as the number of videos is increased.
screening
At first, I thought it might be a Network problem, so I opened F12 Network for debugging.
repetition
The first three videos will start to play within 1s after browsing. The fourth video cannot be played at the beginning, so I continue to move to the next two videos and try to play, but all of them are stuck. The following figure shows the stuck request Status: 206 but Time: Pending.
At this time, the mouse is still waiting for the sixth video to play, after about 10+ seconds, suddenly can play. As can be seen from the following figure, the Timing of the request of the first 3 videos is extended to the time when the next 3 videos can be played. Is it because the previous request is not finished?
Make sure the request does not stop after the video is paused
CAUTION: Request is not finished yet! , you can confirm that the request did not stop after the video was paused.
Find out why
Because the request does not end immediately after the video is paused, as the mouse moves in and out to play and pauses multiple videos, the request eventually reaches its limit (even with HTTP2, the browser/server still limits it).
The solution
Delete after pausevideoThe element
This method does not stop the request immediately, but quickly.
Pause and then emptyvideo.srcattribute
This method stops the request immediately.