预加载视频文件 - HTML5播放

Question

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

Answer 1

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