Блог

Главная - Вопросы по программированию - цикл видео html5 в определенной временной строке с помощью js

цикл видео html5 в определенной временной строке с помощью js

#javascript #html #video

#javascript #HTML #Видео

Вопрос:

у меня был видеобокс html5 только с одним видео внутри. в этом видео это анимированная фигура с разными ходами. в качестве примера: во-вторых, 1-5 фигура заходит внутрь, во-вторых, 5-7 фигура говорит «привет», … я хотел бы управлять этими анимациями с помощью js, и я хотел бы зациклить основную анимацию.

это видеоплеер html5:

 <video id="vidplayer">
<source src="animation.mp4" type="video/mp4"</source>
</video>

я протестировал следующий код для циклического воспроизведения видео между вторыми 7-9, и он не работает:

 var vid = $("#vidplayer").get(0);

vid.ontimeupdate = function(e) {
    if(this.currentTime = 9) {
        vid.currentTime = 7;
        }
    };

он работает только с 

 (this.currentTime >= 9)

но с этим «>=» я не могу использовать анимацию выше 9 секунд (например, 21-29 секунд).

не могли бы вы мне помочь? Спасибо!

Комментарии:

1. как насчет использования вложенных if … сначала проверьте наибольшее время, например, если это. currentTime > = 29 бла еще, если currentTime > = 9 и т. Д

2. спасибо за ваш ответ. Я тестировал его, но не работает. проигрыватель останавливается только в наименьшее время.

Ответ №1:

вам нужно будет проверить как начало, так и остановку фрагментов, в которых вы хотите выполнить цикл, чтобы ограничить тест.

В приведенном ниже примере он будет повторяться с отметки 15 секунд (или больше) обратно до 10 секунд; с отметки 9 секунд обратно до 7; с отметки 5 секунд обратно до 1.

Для производственной версии я бы, вероятно, создал массив точек перехода и использовал его, чтобы избежать необходимости вводить время как верхнее / нижнее, но это должно дать вам основу для продолжения:

 <video preload="auto" controls id="vidplayer">  
<source src="BigBuck.m4v" type='video/mp4;'"></source></video>

<script>

var vid = document.getElementById("vidplayer")

vid.addEventListener('timeupdate', timeupdate, false);

function timeupdate() {
    if (vid.currentTime >= 15) {
        vid.currentTime = 10;
    } else if (vid.currentTime >= 9 amp;amp; vid.currentTime < 10) {
        vid.currentTime = 7;
    } else if (vid.currentTime >= 5 amp;amp; vid.currentTime < 7) {
        vid.currentTime = 1;
    }
}

</script>

Ответ №2:

У меня была такая же проблема, и я написал плагин для ее решения. См. https://github.com/phhu/videojs-abloop . Это позволяет использовать команды javascript для управления циклом фрагмента видео. В примере показано, как вы можете управлять переключением различных разделов видео с помощью обратных вызовов или иным образом.