Preloading Video Files - HTML5 playback

4
votes

Im looking to preload a number of small video files on my website when it first loads. This is so they can be auto-played and used when a user clicks to enter a section of the website. I need the transitions to be seamless so ideally the whole video file should be preloaded to avoid any delays.

Ive tried a few different plugins like html5preloader, and also some other JS techniques to load the video files to the page but hide them to try and force the browser to load the videos before i use them.

Neither have really made much difference to just swapping out the video src when i require to play a different video.

Is there actually a proper solution for doing this or is it because of the HTML5 video playback that the browser only Partially downloads the file as it is played back?

Appreciate any thoughts and feedback on preloading video files for HTML5 playback.

Thanks

1
javascriptjqueryhtmlvideohtml5-video
You may not really want to preload an entire video. What if the user never watches any particular video? Ideally, you could partially preload a video and then load the rest as the user watches. This allows the user to have immediate playback and you to not waste bandwidth. This is actually what YouTube does. - Tyler Crompton
The clips are very small say 5 seconds each and there are 5 or them. The user will end up watching every movie as they go through the website scenes. I just need the files fully loaded so the transition from one section to another would be seamless - Rob Dove
Have you tried adding the 'preload' attribute to your video elements? - brianchirls

1 Answers

0
votes

something like this should help:

<video controls="controls" preload="auto">
  <source src="sample.mp4" type="video/mp4" />
  ...
  Your browser does not support the video tag.
</video>

though because preload="auto" isn't consistent across browsers your milage may vary. If these are very short clips (you mentioned 5 seconds) then it probably will be fairly reliable