How can I stop the preload of a video (HTML5 - Javascript)

Question

I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.

What I would like to do is to then stop the preloading of the two other videos.

Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?

Answer 1

With jQuery, you can try:

$('#videoPlayerId').removeAttr('preload');

I don't know that it will stop a video that's already preloading.

From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.

I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.