Выполнение кода

Выполнение кода.

Теперь, когда мы познакомились со всеми участвующими в обработке элементами, давайте внимательно рассмотрим процесс выполнения функции push().

Эта функция выполняется, когда пользователь щелкает на кнопке Play (Воспроизведение). Сама кнопка играет две роли: в зависимости от ситуации на ней отображается текст «Play», и тогда пользователь может запустить воспроизведение, или «Pause» — в этом состоянии она позволяет приостановить видео. Таким образом, если видео приостановлено или еще не воспроизводилось, эта кнопка включает воспроизведение. И наоборот, если видео уже воспроизводится, то нажатие на кнопку его приостанавливает.

Для того чтобы добиться такого поведения, мы в коде распознаем состояние мультимедиа, проверяя свойства paused и ended. В первой строке кода находится оператор if, проверяющий именно это условие. Если значения mmedia. paused и mmedia. ended равны false, значит, видео воспроизводится, и тогда вызывается метод pause(), приостанавливающий видеофайл, а текст на кнопке меняется на «Play» (для этого мы используем innerHTML).

Если же истинны противоположные условия, то видео стоит на паузе или его воспроизведение завершилось. Тогда условный оператор возвращает значение false и вызывается метод play(), запускающий воспроизведение видео с начала или с того момента, когда оно было поставлено на паузу. В этом случае мы дополнительно выполняем еще одно важное действие: начинаем вызывать функцию status() каждую секунду, определяя время с помощью setInterval().

Листинг 5.8. Эта функция обновляет вид индикатора прогресса

Function status(){ if(!mmedia. ended){

Var size=parseInt(mmedia. currentTime*maxim/mmedia. duration); progress. style. width=size+’px’;

}else{

Progress. style. width=’0px’;

Play. innerHTML=’Play’;

Window. clearlnterval(loop);

Функция status() из листинга 5.8 вызывается каждую секунду, пока видео воспроизводится. В этой функции также присутствует условный оператор if, проверяющий статус мультимедиа. Если свойство ended возвращает значение false, то мы вычисляем требуемую длину индикатора прогресса в пикселах и устанавливаем соответствующий размер для представляющего наш индикатор блока <div>. Если же значение свойства равно true (то есть воспроизведение видео закончилось), то мы устанавливаем нулевой размер индикатора прогресса, меняем текст на кнопке на «Play» и очищаем цикл с помощью clearlnterval. Периодический вызов функции status() отменяется.

Давайте подробнее остановимся на вычислении размера индикатора прогресса. Поскольку функция status() во время воспроизведения видео вызывается каждую секунду, текущее значение позиции воспроизведения постоянно меняется. Это значение (представляющее собой количество секунд) извлекается через свойство currentTime. Мы также знаем продолжительность видео — это значение предоставляет свойство duration — и максимальный размер индикатора прогресса, сохраненный в переменной maxim. Имея эти три значения, несложно вычислить длину (в пикселах) индикатора прогресса, указывающего, сколько секунд видео уже воспроизведено. Формула текущая позиция времени х максимальная длина/общая продолжительность позволяет перевести секунды в пикселы и соответствующим образом изменить размер блока <div>, представляющего индикатор прогресса.

Функцию для обработки события click элемента play (кнопки) мы создали раньше. Теперь нужно сделать то же самое для индикатора прогресса.

Листинг 5.9. Начинаем воспроизведение с позиции, выбранной пользователем

Function move(e){

If(!mmedia. paused && !mmedia. ended){ var mouseX=e. pageX-bar. offsetLeft; var newtime=mouseX*mmedia. duration/maxim; mmedia. currentTime=newtime; progress. style. width=mouseX+’px’;

}

}

Прослушиватель события click добавляется к элементу bar для проверки, не щелкнул ли пользователь на индикаторе прогресса, чтобы начать

Воспроизведение видео с новой позиции. Для обработки события, когда оно происходит, прослушиватель применяет функцию move(). Код этой функции представлен в листинге 5.9. Так же, как и предыдущие функции, она начинается с условного оператора if, однако на этот раз оператор нужен для того, чтобы следующий код выполнялся только для воспроизводящегося видео. Если значения свойств paused и ended равны false, значит, видео воспроизводится и код необходимо выполнить.

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

Процессы, регистрирующие обработчики событий (или прослушивате-ли событий), такие как addEventListener(), всегда генерируют ссылку на событие. Ссылка передается функции-обработчику в виде атрибута. Традиционно для сохранения этого значения используется переменная e. В функции из листинга 5.9 мы воспользовались значением данной переменной и свойства pageX для определения точного местоположения указателя мыши в момент срабатывания события. Свойство pageX возвращает значение, указывающее точку в системе координат всей страницы, а не конкретного индикатора прогресса или окна. Для того чтобы узнать расстояние между началом индикатора прогресса и указателем мыши, необходимо вычесть из значения pageX расстояние между краем страницы и началом полосы индикатора. Вы наверняка помните, что наш индикатор прогресса находится внутри поля, выровненного по центру экрана. Предположим, что от левого края страницы его отделяет 421 пиксел, а щелчок выполнен точно по центру полосы индикатора. Длина полосы индикатора равна 600 пикселам, следовательно, щелчок сделан на расстоянии 300 пикселов от начала индикатора. Однако свойство pageX вернет другое значение, отличное от 300, а конкретно 721. Для получения точной позиции на полосе индикатора прогресса нужно вычесть из значения pageX расстояние между левым краем страницы и началом полосы (в нашем примере 421 пиксел). Получить это значение можно благодаря свойству offsetLeft. Таким образом, формула e. pageX — bar. offsetLeft дает точное местоположение указателя мыши относительно начала полосы индикатора прогресса. В нашем примере итоговая формула будет выглядеть так: 721 — 421 = 300.

Получив данное значение, необходимо преобразовать его в секунды. Мы берем значение свойства duration, точное местоположение указателя мыши на полосе индикатора прогресса и максимальный размер полосы и создаем следующую формулу: mouseX х video. duration/ maxim. Она дает нам искомое значение, которое мы сохраняем в переменной newtime. Результат представляет собой время в секундах, соответствующее позиции на индикаторе прогресса, в которой пользователь щелкнул мышью.

После этого мы начинаем воспроизведение видео с новой позиции. Свойство currentTime, как говорилось ранее, возвращает текущую позицию воспроизведения видео, оно способно также переместить ползунок в новую позицию, если передать свойству новое значение. Установка свойства с использованием переменной newtime позволяет перенести ползунок воспроизведения в желаемую позицию.

Осталось только поменять размер элемента progress в соответствии с новой ситуацией на экране. Используя значение переменной mouseX, мы можем поменять значение элемента так, чтобы точно попасть в точку, где произошел щелчок указателем мыши.

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

Листинг 5.10. Прослушивание события load window. addEventListener(‘load’, initiate, false);

Мы могли бы применить проверенный временем стандартный подход с window. onload и зарегистрировать обработчик события — это обеспечило бы намного лучшую совместимость со старыми браузерами. Однако поскольку книга посвящена HTML5, мы решили прибегнуть к стандартной возможности HTML5 — методу addEventListener().

Скопируйте все фрагменты кода JavaScript, начиная с листинга 5.6, в файл player. js. Откройте файл video. html, содержащий шаблон из листинга 5.4, в своем браузере и щелкните на кнопке Play. Протестируйте приложение в разных браузерах.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *