html5 video preload

Adam picture Adam · Jan 15, 2012 · Viewed 16k times · Source

Is it possible to preload an html video? Note: the tag is created dynamicly later.

Currently I can do this with images by creating a hidden div and putting all the images in there. Then when I create the need later the image does not need to be reloaded.

When this is done with a video tag, the browser still loads the video from the beginning when the element is created.

I saw this: https://github.com/jussi-kalliokoski/html5Preloader.js, but it does not seem to work with videos. Any ideas would be appreciated!

Answer

GOK picture GOK · Jul 24, 2012

Try this out:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" **preload="auto"**>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webM" type="video/webM" />
  Your browser does not support the video tag.
</video>

</body>
</html>

Note: This doesnt work on IE ;), for this you can use some player(simply inclusion of a .js). They have a fallbak of flash for IE use JW Player & JW Player Preload

Njoy!!!