Chrome & Safari not Caching Big Video

user_1218257 0
Viewed 1046

I'm hosting a site that serves an HTML video. My server's video response includes the header cache-control: public, max-age=31536000, immutable. Everything works on Firefox, but on Chrome and Safari I am not seeing the caching results that I expect.

My JavaScript (Angular) seeks the video to a random location at random time intervals. There are two related, but distinct, problems I'm facing:

  1. Chrome and Safari request a video range every time that the video seeks, even if it's already requested that range. That means that if I leave the browser open, it will never stop making requests.
  2. Chrome and Safari don't cache the video between page loads.

I suspected that the problem lies in the size of the video (170 MB), so I substituted it with a smaller video (9 MB) for testing purposes. The shorter video experiences none of the problems that the longer video does:

  1. If the video is not cached. Chrome and Safari make only one request. They do not make new requests for every seek.
  2. After the first request, Chrome and Safari cache the video for new video requests.

The request/response headers are the same for the two videos, and all the responses have 206 statuses. The only significant difference I can find is that the smaller video usually takes only 1 request to download, whereas the bigger video takes multiple.

Why am I unable to cache the bigger video? How do I get around it?

cache-control browser-cache safari google-chrome caching
1 Answers

As you mentioned that you're sending 206 status code for partial content along with age header, but that's not all.

Approach 1

You have to send Content-Range headers which can signify the range of the content that is being downloaded for the media to help browser. Also, there is a cache limit of the browser which automatically prune old/stale content on coming up of fresh content. You can read thoroughly here,

Approach 2

Also, if the header strategy doesn't work, you can always try service-worker caching and build your own cache bucket and cache strategy for specific media content, you can read more about this here.

I hope while testing caching, you're not "Disabling Cache" in Dev-tools and also verify the correct request and response headers from server logs instead of browser for validating caching.

Hope that helps you.

user_12324900
Related