Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2019, 12:28
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 43

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

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

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

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

P.S.
Видео формата Webm
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2019, 13:24
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 43

Вопрос снят.

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

Написал функцию для события.
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2019, 13:43
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 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 секунды.

Функция подвешивания события на видео. которое крутиться бесконечно. Событие будет в начала видео.
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2019, 20:45
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 845

Событие 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>

Последний раз редактировалось Malleys, 19.04.2019 в 20:48.
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2019, 21:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,908

Сообщение от Malleys
if(p && p !== last)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Видео без <VIDEO> и FLASH DIGIUS Общие вопросы Javascript 1 25.10.2016 03:34
Привязка одного события к многим однотипным элементам Rostik Events/DOM/Window 11 16.10.2016 14:59
привязка события к кнопке Mawr Backbone.js 1 13.09.2015 17:34
Привязка события click в цикле к эелементц craz Events/DOM/Window 8 14.11.2010 11:28
привязка события к disabled IOpeH Events/DOM/Window 4 20.03.2009 00:11