Предварительная загрузка видео html5
 

Приветствую всех!

Столкнулся с задачей предварительной загрузки видео на сайт, но как я понял, в html5 нет возможности определить полную загрузку видео, и повесить на это событие действие (старт видео). Дело в том, что я синхронизирую некоторые кадры с появлением блоков на экране. А так как скорость интернета у всех разная, то синхронизация сбивается.

Но на этом сайте: пример страница дожидается полной загрузки видео, и только потом становится доступной для просмотра.

Пытался посмотреть их исходники, но не понял как у них там это работает.

Подскажите, как на html5 сделать предварительную загрузку видео?

Ребята, не могу справится с этой проблемой никак.

Добавил в head:

<link rel="preload" href="video/fon.mp4">

Самому видео повесил: preload="auto"
Запускаю видео по событию

$(window).load(function() {

Предварительно запускаю видео, потом ставлю на паузу, чтобы начал грузится в кэш:

$(window).load(function() {
	video.play();
	video.pause();

Но ничего не помогает. В кэш он не грузится, и при проигрывании видео сбывается синхронность. Вот что у меня получилось: пример

Если открыть первый раз страницу, то иногда первый кадр останавливается до того как успевает выйти из области видимости крышка, на втором кадре рука не успевает уйти, и т.д. А если перезагрузить страницу, то синхронизация работает как надо.

Как можно решить эту проблему? Как принудительно загрузить в кхш это видео?