Возможности:
Видеоплеер с элементами управления, включая воспроизведение/паузу, громкость, скорость и полноэкранный режим
иконки из шрифта awesome
функция полноэкранного режима от w3c для разных браузеров
КОД Гитхаб
HTML
ссылка на видео в плеере.
playinline : автоматически предотвращать полноэкранный режим видео, поскольку вставлена полноэкранная кнопка.
диапазон прогресса в верхней части контейнера управления.
левая сторона: кнопка воспроизведения и значок громкости и диапазон.
правая сторона: скорость, время и полноэкранный режим.
CSS
базовая настройка
корневой стиль на потом.
фон представляет собой узор.
у плеера была рамка и растянутое видео внутри.
выровнять с обеих сторон с помощью flex.
непрозрачность перехода при наведении.
Расчетная ширина диапазона прогресса. убедитесь, что пробел между номером или не будет работать
воспроизведение/пауза
Громкость изменения громкости по ширине
раздел скорости и времени
выделение прозрачное.
время не может быть выбрано
центрировать видео в полноэкранном режиме
Для другого экрана измените размер видео.
JAVSCRIPT
ДОМ выбран.
когда вы нажимаете кнопку воспроизведения, переключаете паузу и значок воспроизведения, а также заголовок.
управление с помощью событий video.play() и pause().
отображать текущее время и продолжительность в правом углу.
изменить индикатор выполнения
когда щелкните на панели, измените новое время.
e.offset — ширина текущей точки.
offsetWidth — общая ширина полосы.
функция открытия и закрытия полноэкранного режима от w3c.
Добавить прослушиватель событий.
