Видео и аудио
• 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()
ничего — следовательно, использовать его невозможно.
Достарыңызбен бөлісу: