CODEWITHSUNDEEP
javascripthtml5-videofetch
Mointy
Mointy

Reputation: 575

fetch video parts like the browser

If you skip the first 50 seconds of a video, the browser will create a new request with a ranged header. For exaple "Content-Range: bytes 5000000-60005535/60005536". So it gets only the data that is needed beginning at the point where you skipped to and not the hole video. When I use the fetch API and set the range headers, I will aswell only download that range.

The problem is that the when I convert the data to blob and creat an object url for it that I can use in the video element, it won't work until I download every byte from the start to where my range ends. So if I download 20-30MB, I still need the first 20MB to make the video player work. And I dont get it why, since the browser does the exact same thing if we skip.

I saw an article from google which shows how to preload videos which is kinda usefull, but it only works with fragmented mp4 why it is useless.

Thats why I thought it would work when I get the data as a readable stream and then convert these chunks of buffers into a blob, but it didn't work.

Is there any way how we can fetch a part video, like beginning at 15 seconds and ending at 25 seconds.

Upvotes: 2

Views: 3727

Answers (1)

Mick
Mick

Reputation: 25471

There are different formats and protocols for video streaming including:

  • simple MP4 HTTP streaming, where the video is a single mp4 file and the server supports request for byte ranges within this vide file
  • specialised streaming protocols, supporting Adaptive Bit Rates and using segmented or fragmented video files - the most common ABR streaming formats at this time are HLS and MPEG DASH.

It sounds like you are interested in something like the first example above.

For that case, it's good to understand that the MP4 video is made up of different parts, called atoms or boxes. One of the key parts needed to allow you playback an MP4 file is the 'Movie Atom'. This is basically the header information that provides a pointer to other parts of the MP4 like, including the video stream and the audio stream.

To allow you fetch part of a video, your client needs to download this header file and then parse it to understand where in the file the particular chunk you want to download is.

Take a look at this answer which shows an example of the structure of the mp4 file also which helps visualise it: https://stackoverflow.com/a/46609643/334402

Upvotes: 3

Related Questions