Свойства

Перечислим наиболее популярные свойства:

paused. Возвращает true, если воспроизведение мультимедиа приостановлено или еще не начиналось;

ended. Возвращает true, если воспроизведение мультимедиа завершилось;

duration. Возвращает длительность мультимедиа в секундах;

currentTime. Способно получать и возвращать значение. Оно либо информирует о текущей позиции воспроизведении мультимедиа, либо устанавливает новую;

error. Возвращает значение ошибки;

buffered. Предоставляет информацию о том, какая доля файла уже загружена в буфер. Благодаря этому мы получаем возможность создавать индикаторы прогресса загрузки. Обычно данное свойство считывают после срабатывания события progress. Поскольку пользователи могут запрашивать загрузку мультимедиа не только с начала, но и с любой другой точки, свойство buffered возвращает массив, содержащий все уже загруженные части мультимедиа, а не только ту, начало которой совпадает с началом файла. Для обращения к элементам массива используются атрибуты end() и start(). Например, код buffered.end(0) возвращает продолжительность (в секундах) первой из содержащихся в буфере частей мультимедиа. Поддержка данной возможности еще окончательно не реализована.

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

Рассмотрим выполнение функции push().

Кнопка играет две роли: в зависимости от ситуации на ней отображается текст “Play”, и тогда пользователь может запустить воспроизведение , или “Pause” – в этом состоянии она позволяет остановить видео. Т.о., если видео приостановлено или еще не воспроизводилось, эта кнопка включает воспроизведение . И наоборот.

Для того, чтобы добиться такого поведения, сы в коде распознаем состояние мультимедиа, проверяя свойства paused и ended. Т.к. текст на кнопке меняется, мы используем свойство innerHTML.

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

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';

clearInterval(loop);

}

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

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

текущая_позиция_времени*максимальная_длина/общая_продолжительность

позволяет перевести секунды в пикселы и соответствующим образом изменить размер блока <div>, представляющего индикатор прогресса.

Рассмотрим реализацию функции move().

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';

}

}

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

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

Процессы, регистрирующие обработчики собйтий (или прослушиватели событий), такие как addeventListener(), всегда всегда генерируют ссылку на событие. ссылка передается обработчику в виде атрибута. Традиционно для сохранения этого значения используется переменная e. В коде мы воспользовались значением этой переменной и свойства pageX для определения местоположения указателя мыши во время срабатывания события. Свойство pageX возвращает значение, указывающее точку в системе координат всей страницы, а не конкретного индикатора прогресса или окна. Для получения точной позиции на полосе индикатора прогресса нужно вычесть из значения pageX расстояние между левым краем страницы и началом полосы. Получить это щначение можно с помощью свойства offsetLeft для bar. Получив данное значение, необходимо преобразовать его в секунды:

var newtime = mouseX * mmedia.duration / maxim;

Результат представляет собой время в секундах, соответствующее позиции на индикаторе прогресса, в которой пользователь щелкнул мышью.

После этого мы начинаем воспроизведение видео с новой позиции. Установка свойства

mmedia.currentTime = newtime;

позволяет перевести ползунок воспроизведения в желаемую позицию.

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

window.addEventListener('load', initiate, false).