<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как вставить видео на HTML сайт

Как вставить видео на 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>

Как вставить видео на HTML сайт.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.