Как вставить видео на HTML сайт
Вставить видео на сайт во весь экран браузера, используя HTML5 теги, намного проще, чем вы себе это представляли. На этом уроке я рассказывал уже, где можно легально скачать коротенькие тематические видео и как вставить на сайт видеофон, с помощью библиотеки jQuery и плагина vide.js.
На этот раз никаких плагинов и библиотек не будет, нам понадобится только само видео. Любезно опять воспользуемся сервисом http://www.coverr.co и скачаем оттуда любое видео.
Перейдя по ссылке ниже, вы можете заранее посмотреть конечный результат, этого урока. Я сделал секцию первого экрана, сайта с услугами по веб-разработке.
Демонстрация примера.
HTML-код
Наше видео будет находиться внутри блока с id movie-bg. В теге video заданы атрибуты, что видеоролик автоматически запуститься (autoplay), без звука (muted), с бесконечным повтором (loop), а так же подгрузится картинка, если видео будет долго загружаться (poster). В теге source, указываете путь до папки с видео.
<div id="movie-bg">
<video autoplay muted loop poster="video/travaho.jpg" id="myVideo">
<source src="video/travaho.mp4" type="video/mp4">
Ваш браузер не поддерживает HTML5 видео.
</video>
</div>
Создадим ещё один блок с классом content для текстовой информации, которая будет поверх видеофона.
<div class="content">
<h1>Разработка сайтов</h1>
<p>Адаптивные сайты под разные разрешения экранов от 5000 рублей.</p>
</div>
CSS-код
Зафиксируем видео картинку в одном и том же положении, независимо от размеров экрана устройств. Так, чтобы блок с контентом оказался сверху видеофона, пропишем z-index: 1, это значение должно быть меньше чем у класса content.
#movie {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
Классу content зададим z-index: 2. Затемним немного блок для лучшей читабельности текста, через альфа канал (0.5) формата RGBA.
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #fаа;
width: 100%;
padding: 15px;
z-index: 2;
}
Свойство object-fit
В случае, если видеофон не отображается в браузере целиком, а вы видите только фрагмент, на помощь придет свойство object-fit. Это свойство применяют к тегам <img> и <video>. Мы хотим уменьшить видеоизображение с сохранением пропорций, для этого выбираем cover. Свойство object-fit не поддерживается всеми браузерами, поэтому формат записи будет через @supports.
@supports (object-fit: cover) {
#movie-bg > video {
width: 100%;
height: 100%;
object-fit: cover;
}
На данном этапе видео на HTML сайте адаптировано под все разрешения экранов и на этом можно было бы закончить. Но есть одна обеспокоенность за облдателей смартфонов. Мы невольно заставим загрузить их лишние 10 MB, а это деньги и скорость. Надо сделать так, чтобы начиная с самых больших экранов смартфонов, вместо видео, загрузилась бы превью картинка в качестве фона.
@media screen and (max-width: 426px) {
#movie {
background: url(video/travaho.jpg) center;
background-size: cover;
}
video {
display: none;
}}
Вот теперь порядок. Им приятно, а нам не сложно.
Управление видеофоном на сайте
Элементы контроля controls на полноэкранном видео смотрятся странно. Давайте просто создадим аккуратную кнопку, чтобы можно было остановить и обратно запустить видео.
Шаг 1) Добавим HTML код после текста
<button id="myBtn" onclick="myFunction()">Пауза</button>
Шаг 2) Добавить стили
#myBtn {
width: 250px;
font-size: 17px;
padding: 15px;
border: none;
background: #0e0d0d;
color: #f4f4f4;
cursor: pointer;
}
#myBtn:hover {
background: #d6d5d5;
color: #000;
}
Шаг 3) Добавить JavaScript код
<script>
// Получить видео c конкретным id
var video = document.getElementById("myVideo");
// Получить кнопку
var btn = document.getElementById("myBtn");
// Функция запуска, остановки видео и замены текста на кнопке
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Пауза";
} else {
video.pause();
btn.innerHTML = "Запуск";
}
}
</script>
-
- Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.