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

Question

[Владислав Старцев]

Добрый день.

Возникла трудность, все никак не могу додумать, есть сайт, при заходе на который сначала должен проиграться 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();
		});
	}
});

Answer 1

[Андрей Хохлов]

https://www.w3.org/2010/05/video/mediaevents.html

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

Ловите завершение видео, не загрузку видео, устройства которые не умеют в автоплей и показывайте контент по этим событиям / параметрам.

Answer 2

[dummyman]

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

Answer 3

[Дмитрий]

вот это событие подойдет ?
https://www.w3schools.com/tags/av_event_loadeddata.asp