2012-01-15 3 views
14

Est-il possible de précharger une vidéo html? Note: le tag est créé dynamiquement plus tard.Pré-charge vidéo html5

Actuellement, je peux le faire avec des images en créant un div caché et en y mettant toutes les images. Ensuite, lorsque je crée le besoin plus tard, l'image n'a pas besoin d'être rechargée. Lorsque cela est fait avec une balise vidéo, le navigateur charge toujours la vidéo depuis le début lorsque l'élément est créé.

J'ai vu ceci: https://github.com/jussi-kalliokoski/html5Preloader.js, mais cela ne semble pas fonctionner avec les vidéos. Toute idée serait appréciée!

+0

Qu'en est-il de l'attribut 'preload =" auto "'? – dfsq

+0

Vous pourriez vouloir regarder ici: http://stackoverflow.com/questions/476679/preloading-images-with-jquery –

+0

Brett, ceci est sur la vidéo, pas d'images. –

Répondre

3

Essayez ceci:

<!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: Ce travail ne marche pas sur IE;), pour cela, vous pouvez utiliser un lecteur (simplement l'inclusion d'un .js). Ils ont un fallbak de flash pour IE utiliser JW Player &

Njoy !!!

0

J'ai eu un problème similaire dans IE, certaines des vidéos sont display: none, et quand je leur montre IE ne montre pas le premier cadre ...

J'utilise le code suivant pour le résoudre, quand je montre les vidéos cachées que j'appelle 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; 
}