Hacker News Reader

Comment by reaperducer | Hacker News Reader

There are a few comments in this thread about how the page is able to determine if you're on a low-bandwidth connection and sends pictures instead of videos.

If anyone knows how this is achieved, I'd love to follow some links.

View on HN

Even at high bandwidth connections, I think they are always using images to power the animations. At lower bandwidth's, they might just be limiting how many frames come down.

For example, here are 3 frames of the hair flip:

https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5...

NYT did a similar scrolly article recently, but they used a video that was synced to scroll position: https://www.nytimes.com/interactive/2019/10/30/world/middlee...

One option is to download an asset and check how many bytes can be transferred in a given time. The classic speed test. You could do that with the first video file you want to load. If the download takes too long, abort the download and start loading the fallback image.

Another option is the Network Information API: https://developer.mozilla.org/en-US/docs/Web/API/Network_Inf... (Only supported by Chrome so far.)

The Save-Data request header: https://developers.google.com/web/fundamentals/performance/o...

And in the client, the NetInfo API: https://wicg.github.io/netinfo/

Apple has some amazing web people.

Reply on news.ycombinator.com