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!
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!!!
I had a similar problem in IE, some of the videos are display:none, and when I show them IE doesn't show first frame...
I used the following code to solve it, when I show the hidden videos I call preloadAllVisible()
var preloadAllVisible = function() {
$("video:visible").each(preload);
}
var preload = function(key, vid) {
vid.play();
setTimeout("pausevid("+key+")",100);
}
var pausevid = function(key) {
vid =$("video:visible")[key];
vid.pause();
vid.currentTime = 0;
}
来源：https://stackoverflow.com/questions/8873562/html5-video-preload