<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Вставка видео в видеоплеер (HTML+CSS)

Вставка видео в видеоплеер (HTML+CSS)

На этом уроке мы разберем, как вставить видео в кастомном видеоплеере на HTML страницу. В качестве импровизированного видеоплеера, будет использовано изображение Smart TV.

Для работы нам потребуется изображение Smart TV и сам видеоролик. Для эксперимента, вы можете совершенно бесплатно скачать любое видео на сервисе http://www.coverr.co.

Вставка видео в видеоплеер (HTML+CSS).

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

Для лучшего понимания, пока вставим видео на сайт без картинки 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>

Вставка видео в видеоплеер (HTML+CSS).

Создадим 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;
}

Вставка видео в видеоплеер (HTML+CSS).

Если Вам интересно узнать, как создать и заработать на собственной веб-студии? Тогда обязательно получите доступ к моей уникальной системе «Своя Web-студия за 55 дней».

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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