@esvlad
Веб-разработчик

Как проиграть ролик перед показом сайта?

Добрый день.

Возникла трудность, все никак не могу додумать, есть сайт, при заходе на который сначала должен проиграться 3-х секундный ролик (анимация в виде видеоролика весит меньше мегабайта), после проигрывания оно становится прозрачным и удаляется с сайта после этого уже показывается сайт.

Ролик скрываю простым скриптом:

setTimeout(function(){
	$('#onloaded').fadeOut(1000, function(){
		$(this).detach();
	}); //Скрываю блок с роликом и удаляю его

	video.play(); //Старт другого ролика
},3100);


Сейчас в общем так и работает но не всегда нормально, т.е. бывает ролик не до грузился, но скрылся, либо дважды показался.

Вопрос можно ли как то отловить момент загрузки, чтобы получить примерно следующее:

ролик загрузился{
 ролик.play();
 setTimeout(...)
}


Заранее спасибо.

upd: спасибо за ссылки, проблему решил следующим образом:

var onload_vid = document.getElementById('onload_v');
var onloaded_time;
onload_vid.addEventListener('timeupdate', function(){
	onloaded_time = this.currentTime;
	console.log(onloaded_time);

	if(onloaded_time > 2.7){
		console.log('succeess');
		$('#onloaded').fadeOut(1000, function(){
			$(this).detach();
		});
	}
});
  • Вопрос задан
  • 227 просмотров
Решения вопроса 3
https://www.w3.org/2010/05/video/mediaevents.html

Ну или плеер ютуба, у него своё апи.

Ловите завершение видео, не загрузку видео, устройства которые не умеют в автоплей и показывайте контент по этим событиям / параметрам.
Ответ написан
dummyman
@dummyman
диссидент-схизматик
Да это решается на уровне html
Посмотрите два события:
короче, ставите свойство autoplay="true"
- вешаем на видео событие loadstart
$('video').on('loadstart', e => this.pause());
- и событие loadeddata
$('video').on('loadeddata' e => this.play());
можно еще отслеживать событие progress
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы