Можностей, предоставляемых веб-разработчикам

Видео и аудио  •  147
панель и добавить отображение буферизованного видео (как показано на рис. 4.5 на второй 
картинке светло-серым цветом), используя следующий код (где переменная 
buffer
 — это 
элемент, указывающий на то, в пределах какой части видео можно осуществлять поиск, 
то есть какая часть файла была загружена):
video.addEventListener('progress', updateSeekable, false);
function updateSeekable() {
    var endVal = this.seekable && this.seekable.length ?
    ¬ this.seekable.end() : 0;
    buffer.style.width = (100 / (this.duration || 1) *
    ¬ endVal) + '%';
}
Код связан с событием 
progress
, и когда оно срабатывает, мы видим, какая часть от всего 
видео может быть воспроизведена на данный момент. Обратите внимание на ключевое 
слово 
this
, которое относится к элементу 
video
. Именно оно является контекстом, в рам-
ках которого будет реализовываться функция 
updateSeekable
. А атрибут 
duration
 — это 
длина медиафайла в секундах.
Однако в Firefox иногда возникает проблема: в предыдущих версиях значение 
seekable.
length
 не совпадало с фактической длительностью видео, а в последней версии (5.0.1) атри-
бут 
seekable
 вообще отсутствует. Для того чтобы диапазон поиска по видеофрагменту не 
искажался, можно включить прослушивание события 
progress
 и анализировать значение 
duration
 для нашего элемента 
video
:
video.addEventListener('durationchange', updateSeekable,
¬ false);
video.addEventListener('progress', updateSeekable, false);
function updateSeekable() {
    buffer.style.width = (100 / (this.duration || 1) *
        (this.seekable && this.seekable.length ? this.seekable.
        ¬ end() : this.duration)) + '%';
}
Неприятно, конечно, что у нас нет надежного способа определения диапазона видеоролика, 
по которому возможен поиск. Альтернативное решение основывается на использовании 
свойства 
video.buffered
, но нам оно не подходит: мы пытаемся справиться с проблемой 
в Firefox, а данное значение в настоящий момент в Firefox не возвращает в методе 
video.
buffered.end()
 ничего — следовательно, использовать его невозможно.

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу: