Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2019, 21:30
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 129

Почему не получается повесить 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); 
//});

Последний раз редактировалось giwuf, 09.07.2019 в 21:54.
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2019, 22:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,031

Сообщение от giwuf
немного разобрался с тем, что нужно подвязываться к событию canplay, но по прежнему не понимаю почему loader пропадает раньше, чем начинается воспроизведение видео...
Событие canplaythrough
https://jsfiddle.net/t513zwcp/

вам нужно также добавить событие error!

Последний раз редактировалось Malleys, 09.07.2019 в 22:48.
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2019, 09:38
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 129

Сообщение от Malleys Посмотреть сообщение
Событие canplaythrough
https://jsfiddle.net/t513zwcp/

вам нужно также добавить событие error!
Malleys, понял, спасибо большое!
А можно еще вопрос? Не подскажите, почему так долго может загружаться видео на моем сайте
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается повесить событие wine-time Элементы интерфейса 2 23.07.2011 02:54
как отследить событие загрузки img? GrEb Events/DOM/Window 3 12.02.2010 15:47
Как повесить событие без редактирования файла? bilbas Общие вопросы Javascript 8 11.09.2009 14:17
Почему не получается jQuery("td").draggable()? khusamov Общие вопросы Javascript 1 17.07.2009 16:07
почему эффект рыбьего глаза не получается??? timergaliev_marat jQuery 0 19.06.2009 14:07