JS30. Задание 11 Custom Video Player

Демо https://js3011.github.io
Код https://github.com/js3011/js3011.github.io

Задача - использовать js для создания панели управления в плеере.

HTML5 позволяет добавлять видео на веб-страницу при помощи тега video:

<video src="movie.webm" controls></video>

Что интересно, формат  .webm не сумел открыть в таком коде ни один из установленных у меня браузеров. mp4 открыли все

Открывается плеер с видео:

Внешний вид видеоплеера в основных браузерах

Атрибут controls отвечает за появление элементов управления видеоплеером.
Добавить изображение можно с помощью атрибута poster

<video src="movie.mp4" controls poster="image.jpg"></video>

Это изображение браузер будет использовать, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения

Постер заливает видеоплеер масштабируя изображение так, чтобы оно целиком поместилось внутрь плеера. Если пропорции изображения и плеера отличаются, часть пространства остаётся без заливки картинкой. Возможности выбора способа заливки: contain или cover похоже не предусмотрено.

Можно задать высоту и ширину видео атрибутами width=" ", height=" ".

Чтобы выровнять видеоплеер на странице, нужно обернуть элемент <video> в контейнер <div>, для которого задаются ширина и высота, соответствующие размерам плеера. Далее, с помощью css-свойств можно задать отступы, выравнивание на странице и т.д.

О других атрибутах видео можно прочитать здесь: HTML5-видео

На мой взгляд, плеер получается достаточно красивым и особой стилизации не требует.
Сравните.
Так выглядит плеер без стилизации

Предназначение каждого элемента интуитивно понятно.
Перечисляю слева направо:
- кнопка запуска видео / пауза
- текущее время / общее время
- шкала воспроизведения
- значок громкости
- шкала громкости
- кнопка во весь экран
- кнопка скачать виде

Посмотрим на видео автора

Информации и возможностей существенно меньше, понятность в разы хуже.
Если всё это было затеяно чтобы сделать шкалу прозрачной и скрывающейся, а шкалу проигрывания желтой, то оно того не стоит.

Если вдруг понадобится, здесь статья
Как сделать собственный видео-плеер на HTML5 Video (2011 год)