На этом уроке разберем, как вставить видео в кастомном видеоплеере на HTML страницу. В качестве импровизированного видеоплеера, будет использовано изображение Smart TV .
На этом уроке разберем, как вставить видео в кастомном видеоплеере на HTML страницу. В качестве импровизированного видеоплеера, будет использовано изображение Smart TV.
Для работы нам потребуется изображение Smart TV и сам видеоролик. Для эксперимента, вы можете совершенно бесплатно скачать любое видео на сервисе http://www.coverr.co.
Как вставить видео на сайт
Для лучшего понимания, пока вставим видео на сайт без картинки TV. Сделать это очень просто. Для добавления на HTML страницу видео, существует два тега: video и source. Атрибут controls добавляет элементы контроля для встроенного плеера. В разных браузерах встроенные плееры выглядят по разному. Надо иметь ввиду, что большинство браузеров поддерживают формат MP4. Если подключается только один формат видео, то указываем его сразу в теге video.
<video src="example.mp4" controls>></video>
Запись ниже предназначена для случая, когда форматов видео несколько.
<video controls width="640" height="360">
<source src="example.mp4" type="video/mp4">
<source src="example.avi" type="video/avi">
</video>
Создадим flex-контейнер для элементов - секцию с классом smart_tv. Внутри секции поместим два flex-элемента:
- видеоплеер (изображение телевизора)
- видеоролик (тег video с элементами управления controls)
<section class="smart_tv">
<div class="player">
<img src="smart-tv.png" alt="">
<video src="training-cyclist.mp4" controls>
</video>
</div>
</section>
Обнуляем поля и отступы для всех элементов
*{
margin: 0;
padding: 0;
}
Сделаем изображение TV адаптивным.
img{
max-width: 100%;
height: auto;
}
Зададим высоту секции на весь экран, отцентрируем все флекс-элементы.
.smart_tv{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
position: relative;
}
Растянем блок с видеоплеером на всю ширину контейнера. Ограничим максимальную ширину, чтобы видеоплеер не растягивался на всю ширину на больших экранах. Зададим относительное позиционирование, чтобы элементы можно было позиционировать относительно данного блока.
.player{
width: 100%;
max-width: 800px;
position: relative;
}
На данный момент картинка телевизора и само видео расположены друг под другом. Нужно видео встроить в экран телевизора, подбирая на ходу значения ширины, высоты и двигая видео вверх и влево. Все размеры указываются в процентах, чтобы видеоплеер мог быть адаптивным.
.player video{
position: absolute;
width: 92.0%;
height: 82.1%;
top: 2.4%;
left: 1.8%;
background: #000;
}
Демонстрация работы видеоплеера
Если Вам интересно узнать, как создать и заработать на собственной веб-студии? Тогда обязательно получите доступ к моей уникальной системе «Своя Web-студия за 55 дней».
