Javascript-форум - Почему не получается повесить loader на событие загрузки видео?

Всем привет! Есть на сайте 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); 
//});