Как правильно показывать выводить прилоадер видео через JS?

Question

[Millerish]

Добрый вечер!

Помогите решить вопрос по выводу прилоадера в момент загрузки видео. Я не могу понять какие события когда применять для того, что бы показать его когда загрузка приходит (остановить видео) и скрыть когда она заканчивается(продолжить видео). Мучаюсь над этим примером.

Есть видео:

video id="player" width="100%" height="100%" preload="none"

Есть прилоадер:

div class="poster"

Скрытие прилоадера происходит добавлением класса display-none.

Сейчас код выглядит так:

// клик на постере
$('.poster').click(function () {
$('.poster').addClass('display-none');
// if(VIDEO_UPLOAD == true){
// vid.play();
// }
// POSTER_CLICK = true;
vid.play();

});
vid.onloadeddata = function() {
console.log("начало загрузки");
// vid.pause();
$('.videoBlock .preloader').addClass( 'display-none' );
console.log('onloadeddata')
};
vid.oncanplaythrough = function() {
console.log("конец загрузки");
vid.play();
$('.preloader').addClass( 'display-none' );
// $('.videoBlock .preloader').addClass( 'display-none' );
console.log('oncanplaythrough')
};
vid.oncanplay = function() {
console.log("конец загрузки");
vid.play();
$('.preloader').addClass( 'display-none' );
console.log('oncanplay')
};
vid.onprogress = function() {
console.log('onprogress')
$('.preloader').removeClass( 'display-none' );
vid.pause();
};

Очень нужна подсказка.