Why html5 video loop create request each iteration

问题:

I have Disable cache tick removed and still request is made on each video loop iteration(Only on chrome).

What Initiator: Other mean in chrome inspector network section? First time the video is loaded from the host, but after that all requests are loaded from Other.

Each iteration video size is the same, not (from cache). Is that mean the browser download it every time?

Can it be avoided somehow without saving the video in localStorage(I saw it in similar question), because this solution will not work in private browser mode and localStorage have size limit?

UPDATE

With Disable cache checked

Without Disable cache checked

UPDATE

Bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=680063

回答1:

The meaning of this is that another process than Chrome initiated the request:

Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar.

In the case of Chrome, video is decoded using ffmpeg which likely is this other process. The process is likely reopening the file from the cache which is why the request is initiated, or, the cache only holds the latter part (or max content length in sum) of the file in case the file is large and has to re-stream parts of the content over again - though, you state that when cache is disabled this doesn't happen.

localStorage has a very limited size and is not very suitable for storing video data (it can only hold strings so video must be encoded as mime-64 which increases the size 33% + each char takes up two bytes due to unicode).

A better alternative would be to use IndexedDB - this can hold much larger data as well as store the data in binary format (Blob). But it comes with an initial limit as with localStorage but contrary to the latter method you can request a larger size which the user need to confirm. I haven't tested, but I would assume you will run into the same limitations with private mode as with any other storage mechanism.

回答2:

Yesterday I had the same issue. I found that Chrome's tab crashes after a couple of minutes. It looks it happens only when Disable cache is checked, but if this still bugs you, you can store the video into the local storage. More code in this answer.