Можностей, предоставляемых веб-разработчикам
В ОСПРОИЗВЕДЕНИЕ, ПАУЗА — И ВСЕ ЭТО
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)
- Бұл бет үшін навигация:
- Рис . 4 .4 .
| В
ОСПРОИЗВЕДЕНИЕ, ПАУЗА — И ВСЕ ЭТО НА ОДНОЙ КНОПКЕ Теперь мы хотим, чтобы у нас была возможность воспроизводить и ставить на паузу ви- део при помощи элементов управления, над которыми мы уже немного потрудились. Мы добавили кнопку, с которой свяжем обработчик нажатия и, таким образом, реализуем функциональность «воспроизведение/пауза». В моих примерах кода, когда я упоминаю об объекте play , имеется в виду этот элемент button : Мы используем ► , геометрическую сущность XML, которая выглядит как кнопка «воспроизведение». Когда мы нажимаем на кнопку, начинается воспроизве- дение видео, а кнопке приписывается новое значение, ▐ , описывающие две вертикальные линии (похо- жие на кнопку «пауза») — это показано на рис. 4.4. Для простоты я сделал кнопку при помощи метки, но по мере применения к нашим элементам управления видео прогрессивного усовершенствования все дополнитель- ные элементы (для воспроизведения, паузы, промотки и т. д.) должны быть описаны при помощи JavaScript. К переключателю «воспроизведение/пауза» нам нужно добавить еще несколько деталей: 1. Если пользователь щелкает на кнопке переключения и видео стоит на паузе, то необхо- димо начать воспроизведение. Если воспроизведение завершено и указатель текущего Рис . 4 .4 . Сущности XML представляют кнопки воспроизведения и паузы Видео и аудио • 145 кадра находится в самом конце видео, нужно сбросить текущее значение времени на 0, то есть перевести указатель на начало видео и запустить воспроизведение. 2. Нужно запрограммировать изменение значения кнопки-переключателя, чтобы, когда пользователь нажимает на нее, она менялась с паузы на воспроизведение или с вос- произведения на паузу. 3. Наконец, мы воспроизводим видео (или ставим его на паузу): playButton.addEventListener('click', function () { if (video.paused || video.ended) { if (video.ended) { video.currentTime = 0; } this.innerHTML = ''; // ▐▐ doesn't ¬ need escaping here this.title = 'pause'; video.play(); } else { this.innerHTML = ''; // ► this.title = 'play'; video.pause(); } }, false); Проблема этой логики заключается в том, что мы полностью полагаемся на наш скрипт при определении состояния кнопки «воспроизведение/пауза». А что если у пользовате- ля будет возможность каким-то образом воспроизводить и ставить на паузу видео при помощи родных элементов управления (некоторые браузеры позволяют пользователю выбрать данные опции при нажатии правой кнопки мыши)? Кроме того, когда воспроиз- ведение закончится, кнопка «воспроизведение/пауза» будет выводить значок паузы. На самом деле, нам нужно, чтобы элементы управления всегда работали в зависимости от состояния видео. жүктеу/скачать 5,47 Mb. Достарыңызбен бөлісу:
|