HTML5 Video — limiting buffer for an MP4

Question

Is it possible to use an HTML5 Video tag to load an MP4, but control how much of the file is downloaded/buffered from the server (assume it supports byte ranges).

Essentially, I'd like to be able to say "only download 60 seconds ahead" so I can avoid the browser downloading an entire 2 GB file when the user is going to end up bouncing anyway.

Does this answer your question? [Loading chunks into html5 video](https://stackoverflow.com/questions/32789417/loading-chunks-into-html5-video) — nobody, Feb 07 '22 at 05:58

score 0 · Answer 1 · answered Feb 07 '22 at 06:59

0

Source: https://stackoverflow.com/a/65501042/2982234

You could use the media-fragment syntax in the url to let the browser know which portion of the media it should play.

document.querySelector("button").onclick = ({target}) => {
  target.remove();
  document.querySelector("video").play();
};

video { max-height: 100vh; }

<button>play</button>
<video muted src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm#t=0,60"></video>

answered Feb 07 '22 at 06:59

umanga shrestha

368
2
8
29

You would need to constantly alter the source while the video is playing to achieve what capped buffering during play does. Unless it actually handles this very smoothly, I imagine it would feel like the video is constantly being reloaded. – Edward Feb 07 '22 at 14:25

score 0 · Accepted Answer · answered Feb 09 '22 at 15:07

0

Answer: browsers will automatically buffer only what they need, rather than download the whole file. It is not necessary to try and control the buffering from a "custom" HTML5 player POV.

answered Feb 09 '22 at 15:07

Edward

518
3
13

HTML5 Video — limiting buffer for an MP4

2 Answers2