Всем привет! Есть на сайте
loader, который должен показываться до тех пор пока не загрузится видео [в первом экране] в кеш браузера. (страница со скриптами в это время может продолжать загружаться).
Т.е. интересует момент когда видео подгрузится настолько, что пойдет воспроизведение его первого фрейма.
Хоть это не очень видно, но набросал пример
здесь
Однако, у меня не получается зацепиться за событие
loadstart по окончании которого должен пропасть loader.
Запутался и не понимаю, что делаю не так..
P.S. немного разобрался с тем, что нужно подвязываться к событию
canplay, но по прежнему не понимаю почему
loader пропадает раньше, чем начинается воспроизведение видео...
$("#h-intro-video").addEventListener("canplay", function() {
jQuery( "#loadingDiv" ).fadeOut(500, function() {
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
}, false);
==============================================
<video id="h-intro-video" src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4" autoplay loop="loop" muted=""></video>
<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>
$("#h-intro-video").on("loadstart", function() {
console.log("on loadstart");
});
document.getElementById("h-intro-video").addEventListener("loadstart", function() {
console.log("loadstart");
}, false);
$("#h-intro-video").onplay = function () {
console.log("onplay");
};
function removeLoader(){
jQuery( "#loadingDiv" ).fadeOut(500, function() {
document.getElementById( "loadingDiv" ).remove(); //makes page more lightweight
});
}
//$(window).on('load', function () {
setTimeout(removeLoader, 0);
//});
