Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Обновление значения времени по мере воспроизведения видео

.

Обновление значения времени по мере воспроизведения видео

Перейдем к последнему шагу: мы хотим, чтобы указатель текущей позиции воспроизведения по мере проигрывания ролика непрерывно обновлялся. Мы уже знаем свойство currentTime; мы можем использовать его для обновления содержимого элемента #timeHolder. Вот как это делается:

Обновление значения времени по мере воспроизведения видео

В данном коде имеется слушатель события timeupdate: оно возникает каждый раз, когда изменяется текущее время видео, т.е. каждую долю секунды. В принципе, этого уже достаточно, чтобы создать таймер. Беда в том, что он будет ужасно выглядеть и приносить мало пользы, ведь такой счетчик отображал бы изменения миллионы раз в секунду (рис. 5.8).

Обновление значения времени по мере воспроизведения видео

Рис. 5.8. Использование свойства currentTime для отображения таймера — плохая идея

Вдобавок такой таймер не будет отображать ни часов, ни минут, только секунды — сотни или тысячи секунд, в зависимости от длины видео. Не слишком удобно, мягко говоря.

Чтобы представить время в формате, более удобном для пользователей, мы напишем функцию secondsToTime (), которую будем вызывать из обработчика timeupdate. Мы не хотим, чтобы перед глазами пользователя мелькали миллисекунды, поэтому функция должна округлять значение времени до секунд.

Вот начало нашей функции:

Обновление значения времени по мере воспроизведения видео

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

Теперь нам нужно сделать так, чтобы счетчик все время показывал время в одном формате, вне зависимости от числа десятичных разрядов, т.е. 05, а не просто 5. Вот как мы сделаем это:

Обновление значения времени по мере воспроизведения видео

В итоге мы получим строку, содержащую текущее время видео в корректном формате:

Обновление значения времени по мере воспроизведения видео

Конструкция if/else проверяет, превышает ли продолжительность ролика один час; если да, то время будет представлено с двумя двоеточиями. В противном случае двоеточие будет одно, между минутами и секундами.

Вспомните, откуда вызывается эта функция: из обработчика события timeupdate. Возвращенный результат функции станет контентом элемента timeHolder (это кэшируемый элемент с id таймера):

Обновление значения времени по мере воспроизведения видео

Поскольку событие timeupdate происходит каждую долю секунды, содержимое элемента timeHolder будет меняться очень быстро. Но поскольку мы округляем значение до ближайшей целой секунды, видимые изменения будут происходить намного медленнее.

Ну вот и все, наш пользовательский интерфейс готов. Кнопки делают то, что мы от них хотим, таймер плавно отсчитывает время. Как мы указали выше, в нашем варианте интерфейса некоторые органы управления отсутствуют. Однако теперь у вас уже есть хороший опыт работы с элементами видео HTML5 в JavaScript, и вы можете настроить оставшееся самостоятельно.


.

Читайте так же:
Not found