Как я могу выполнить действие DOM в указанном кадре c в видео 3s?

Question

Мне нужно создать последовательность изображений, состоящую из 25 кадров, запущенных при загрузке страницы. Каждый кадр показан на 150 мс. На 20-м кадре я хотел бы, чтобы элемент html (таймер обратного отсчета) появлялся в определенном c месте на видео a (белое поле). Я хотел бы запустить это видео на 100% ширины области просмотра, как как только страница загрузится.

На мой взгляд, есть несколько вариантов:

1. Кодирование изображений в видео и размещение их на vimeo. Я предполагаю, что ограничение будет заключаться в том, что для загрузки видео в разные браузеры требуется разное время. Так что, возможно, я мог бы смотреть определенный c пиксель в определенном соотношении на экране (для мобильного телефона и c), и когда он становится белым, я отображаю обратный отсчет (это вообще возможно?). Положительным моментом является то, что воспроизведение всегда будет плавным.

2. Я загружаю каждое изображение программно с javascript и некоторыми базовыми c setTimeout logi c. Проблема с этим, я думаю, то, как работает событие l oop, означает, что setTimeout не настолько надежен. И изображения не воспроизводятся плавно, особенно при первой загрузке. Я действительно вижу, как они пропускают всю анимацию при перезагрузке страницы с отключенным кэшированием. Я поместил все 25 изображений в display:none div в верхней части страницы в надежде, что они будут предварительно загружены, но не повезло. Это все еще глюки.

3. Есть ли лучший способ? Может Гринсок? Я действительно не уверен, как я должен подходить к этому. Мне нужно, чтобы изображения были предварительно загружены, но должны быть скрыты, а затем javascript logi c для плавного запуска 25 кадров по 150 мс каждый без сбоев. И чтобы иметь возможность вставлять элемент dom ровно в 20 кадров.

Любой совет или любые другие предложения будут очень признательны.

Answer 1

Вы можете добавить маркер к своему видео, используя библиотеку video js -markers . Он содержит метод обратного вызова onMarkerReached, который можно использовать для запуска обратного отсчета.

Ваш код будет выглядеть примерно так:

<video id="demo" controls class="video-js vjs-default-skin">
   <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
   <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>  

var player = videojs('demo');
player.markers({
    markers: [
       {time: 3, text: ""}
    ],
    onMarkerReached: function(marker) {
        // start your timer
    },
});