YouTube & Netflix Preview Trick 🤯 | Sprite Sheets + VTT Explained | Ep-2

So when you check the timeline on Netflix or YouTube, it shows you multiple images without any lag. Does it mean that the entire movie is pre-loaded? Obviously not. So let's understand how it works. Welcome back to episode two of learning interesting things with stri. So whenever any movie is uploaded on the back end, a sprite sheet or a thumbnail strip is generated to optimize this process. It primarily has three steps. The first one extraction. The second one assembly. The third one compression. Extraction means it decides a time frame. Let's assume 3 seconds. That means I'll be picking up a single image for every 3 seconds. So for a 1 hour movie, it will mean 1,200 images. Sending 1200 images when it loads for the first time means it's going to be extremely laggy and it will cost you a lot as well. Second step, assembly. This is where multiple images are arranged in one single grid. So let's assume a single grid can hold 100 images. We have 1200 images. Thereby I'll have 12 sprite sheets. The last step compression. We Now each of them are compressed and after that the initial ones are send over when it loads and eventually according to requirement we keep sending the remaining ones. It also generates a small metadata VTT file which has information mapped to the sprite sheet. This includes the timestamp, the sprite URL and the coordinates. The time stamp is basically where you're hovering. The sprite URL will tell you which sprite sheet has the frame. Then the coordinates will tell you where in the sprite sheet this data is sent over to the front end that is used to render as you hover on the screen. That was it for this one and yeah I keep posting such things. So yeah, in case you're interested to follow me for such more