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


В ОСПРОИЗВЕДЕНИЕ, ПАУЗА — И ВСЕ ЭТО



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

В
ОСПРОИЗВЕДЕНИЕ, ПАУЗА — И ВСЕ ЭТО  
НА ОДНОЙ КНОПКЕ
Теперь мы хотим, чтобы у нас была возможность воспроизводить и ставить на паузу ви-
део при помощи элементов управления, над которыми мы уже немного потрудились. Мы 
добавили кнопку, с которой свяжем обработчик нажатия и, таким образом, реализуем 
функциональность «воспроизведение/пауза». В моих примерах кода, когда я упоминаю об 
объекте 
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);
Проблема этой логики заключается в том, что мы полностью полагаемся на наш скрипт 
при определении состояния кнопки «воспроизведение/пауза». А что если у пользовате-
ля будет возможность каким-то образом воспроизводить и ставить на паузу видео при 
помощи родных элементов управления (некоторые браузеры позволяют пользователю 
выбрать данные опции при нажатии правой кнопки мыши)? Кроме того, когда воспроиз-
ведение закончится, кнопка «воспроизведение/пауза» будет выводить значок паузы. На 
самом деле, нам нужно, чтобы элементы управления всегда работали в зависимости от 
состояния видео.


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




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

    Басты бет