Можностей, предоставляемых веб-разработчикам
Б ОГАТЫЕ СОБЫТИЯМИ ЭЛЕМЕНТЫ МЕДИА
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
[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. И наконец, нам необходимо описать событие, которое говорит о том, что можно начать про- смотр, то есть у нас достаточное количество буфе- ризованного видео для начала воспроизведения. жүктеу/скачать 5,47 Mb. Достарыңызбен бөлісу:
|