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


Б ОГАТЫЕ СОБЫТИЯМИ ЭЛЕМЕНТЫ МЕДИА



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

Б
ОГАТЫЕ СОБЫТИЯМИ ЭЛЕМЕНТЫ МЕДИА
Вокруг элементов медиа есть масса событий: начало воспроизведения, конец загрузки
изменение громкости и т. д. Так что для дальнейшей работы с кнопкой «воспроизведение/
пауза» мы беремся за часть скрипта, которая сосредоточена на изменении визуального 
отображения:
playButton.addEventListener('click', function () {
    if (video.ended) {
        video.currentTime = 0;
    }
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}, false);


146  •  Глава 4
В простейшем коде, если воспроизведение файла закончилось, мы сбрасываем видео на на-
чало, а затем изменяем значение переключателя в зависимости от его текущего состояния. 
Сама метка на элементе управления изменяется благодаря отдельным (анонимным) функ-
циям, которые мы напрямую добавили к обработчикам событий нашего элемента видео:
video.addEventListener('play', function () {
    play.title = 'pause';
    play.innerHTML = '';
}, false);
video.addEventListener('pause', function () {
    play.title = 'play';
    play.innerHTML = '';
}, false);
video.addEventListener('ended', function () {
    this.pause();
}, false);
ПРИМЕЧАНИЕ
В этих примерах мы используем API модели DOM второго уровня 
addEventListener, а не 
attachEvent, так как последний используется исключительно в Internet Explorer до восьмой 
версии  IE9 поддерживает видео, кроме того, он, к счастью, поддерживает еще и стандартный 
addEventListener, так что и в этом браузере наш код будет работать 
Теперь каждый раз, когда видео проигрывается, 
ставится на паузу или заканчивается, запускается 
функция, привязанная к соответствующему собы-
тию, которая проверяет, правильный ли вариант 
кнопки отображается на панели.
Теперь, после того как мы описали воспроизве-
дение и паузу, мы хотим показать пользователю
какая часть видео загрузилась, то есть какая часть 
может быть воспроизведена. Как вы уже догада-
лись, речь идет о количестве буферизованного ви-
део. Мы также хотим поймать событие, сообщаю-
щее, какая часть видео уже была проиграна, чтобы 
бегунок на панели воспроизведения перемещался 
в соответствующую область, как показано на рис. 
4.5. И наконец, нам необходимо описать событие, 
которое говорит о том, что можно начать про-
смотр, то есть у нас достаточное количество буфе-
ризованного видео для начала воспроизведения.


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




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

    Басты бет