Панель управления

Создать свою собственную панель управления медиа-плеером с помощью тегов HTML5 и сценариев JavaScript. Панель управления отображается после наведения курсора мыши на видео и в основных браузерах выглядит одинаково.

Своя панель управления медиа-плеером
Панель управления медиа-плеером

В CSS для всего контейнера с видеотегом присвоено значение с относительной позицией, а элементы управления с абсолютной позицией. Изначально панель прозрачная, плавность появления панели указывается переходом. Иконки на панели — «SVG спрайты», расположенные свойствами «FlexBox». Элемент управления видеопотоком и громкость звука оформлен свойствами описанными на странице «Ползунок».

Разметка HTML представляет собой контейнер с элементами управления.

<figure class="container">
		<video>
				<source src="video.webm" type="video/webm">
				<source src="video.mp4" type="video/mp4">
		</video>
		<div class="controls">
				<button class="play"></button>
				<span class="curtime">00:00</span>
				<span role="separator">/</span>
				<span class="durtime">00:00</span>
				<input class="seek" type="range" min="0" max="100" value="0" step="1">
				<button class="mute"></button>
				<input class="volume" type="range" min="0" max="100" value="100" step="1">
				<button class="fs"></button>
		</div>
<figcaption></figcaption>
</figure>

JavaScript применяется для управления медиа-потоком; воспроизведение, пауза, прокрутка, добавить и уменьшить звук, отключить и включить звук. А так же предусмотрен полноэкранный режим после нажатия на иконку с правого края панели. Еще полноэкранный режим сработает если нажать два раза на видео.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 4 из 5)