0

I have a video rendering engine that uses puppeteer to paint frames. It uses javascript and HTML to seek and draw video frame by frame.

Large videos slow down the rendering significantly, the primary reason being that it's waiting on the network. I don't exactly know how Chrome decides to download the video data on seek, but it can be slow (if there are docs on this please share)

Often times a (as an example) a 100s video that is 100MB will be trimmed down to 10s by the user, leaving us only needing 10MB. To optimize things even further as Chrome paints a particular frame (at 60fps) we only need around 20kb (rounding up).

I understand range requests can offer this capability, and to slice the bits I need (aka a frame) on paint/during a network request, the video needs to be encoded correctly.

I also know that the video needs it's metadata to be available at the start of the video. This post How to make range request for any portion of a media fragment? assumes a variety of videos are going to be used.

Lets say we can manipulate it with FFMPEG and set the metadata at the start -movflags +faststart is this enough to enable range request with specifying a portion of the video to retrieve? What all needs to be done to a video before it's possible to use range requests to optimize network calls?

As an example, it seems YouTube has figured this out, if you look at their network requests they seem to be fragmented. They encode all their uploads to make it possible it seems.

Michael Joseph Aubry
  • 12,282
  • 16
  • 70
  • 135

0 Answers0