Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Привязка события к определенному фрагменту видео (https://javascript.ru/forum/misc/77327-privyazka-sobytiya-k-opredelennomu-fragmentu-video.html)

AleksSergSB 19.04.2019 12:28

Привязка события к определенному фрагменту видео
 
Добра!

Хочу привязать event(событие) к определенному фрагменту видео(~4,5 сек). Оно проигрывается бесконечно. Привязаться хочу к началу видео.

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

Есть ли для этого какое-либо событие?
Или какие-либо иные инструменты..

P.S.
Видео формата Webm

AleksSergSB 19.04.2019 13:24

Вопрос снят.

P.S.
Можно получить текущую продолжительность:
element.currentTime;

Написал функцию для события.

AleksSergSB 19.04.2019 13:43

Поделюсь функцией, которую быстро накидал.
feedback приветствуется.
window.onload = function() {
var curtimeBe = video1.currentTime;
			function eventVideo(){
				if( video1.currentTime < curtimeBe){
				// ( .. ) здесь событие по первым кадрам видео
				// ( .. )	
				} 
               setTimeout(eventVideo, (30.7-video1.currentTime)*1000 )
				// console.log(video1.currentTime)
			}
			eventVideo();
  	};
}

После загрузки видео задаем SetTimeout через функцию eventVideo, которое запуститься ближе к концу видео. В коде выше, это 30.7 (продолжительность всего видео). Подогнать можно раздокументировав console.log и посмотреть как часто выполняется. Лучше задавать не ближе 0.100 секунды.

Функция подвешивания события на видео. которое крутиться бесконечно. Событие будет в начала видео.

Malleys 19.04.2019 20:45

Событие timeupdate

<video id="video1" controls autoplay loop src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_1mb.mp4"></video>
<output id="out"></output>
<script>
video1.addEventListener("timeupdate", (last => ({ target }) => {
	var p = target.currentTime >= 2; // или другое время вместо 2-ой секунды

	if(p && p !== last) {
		out.append(document.createElement("br"), "Event!", target.currentTime);
	}

	last = p;
})());

</script>


Или playing, если нужно вначале

<video id="video1" controls autoplay loop src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_1mb.mp4"></video>
<output id="out"></output>
<script>
video1.addEventListener("playing", ({ target }) => {
	if(target.currentTime < 1) out.append(document.createElement("br"), "Event!", target.currentTime);
});
</script>

рони 19.04.2019 21:47

Цитата:

Сообщение от Malleys
if(p && p !== last)

:thanks:


Часовой пояс GMT +3, время: 05:29.