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



Pdf көрінісі
бет168/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   164   165   166   167   168   169   170   171   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

ОТСЛЕЖИВАЕМ ХОД ЗАГРУЗКИ
У элемента 
media
 есть событие 
progress
, которое срабатывает, когда файл медиа уже об-
наружен, но еще не обработан. При активации этого события мы можем считывать объект 
video.seekable
, у которого есть методы 
length

start()
 и 
end()
. Мы можем изменить 
Рис . 4 .5 .
 Наш специальный прогресс-
бар для видео, включая поиск 
по контенту и текущую позицию 
воспроизведения


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


Достарыңызбен бөлісу:
1   ...   164   165   166   167   168   169   170   171   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет