Как и с аудио, ещё недавно в HTML-разметку нельзя было «комфортно» вставить видео-файл. Начиная с HTML5 появился элемент <video>, который, как и <audio>, позволяет быстро добавить необходимое видео на страницу.
Тег <video> парный, в котором, при отсутствии вложенных тегов <source>, указывается путь к видео-файлу в атрибуте src. С помощью атрибута controls можно вывести элементы управления для проигрывателя. Визуальное оформление управляющих элементов зависит от конкретного браузера.
С помощью специальных тегов <source> возможно добавлять несколько форматов видео. Это необходимо по причине того, что каждый браузер умеет воспроизводить только определённые форматы видео. Единственный формат, который корректно обрабатывают все браузеры — mp4.
Наличие трёх форматов файлов гарантирует работоспособность видео на любых устройствах. Также обязательным является наличие атрибута type, который сообщит браузеру формат видео. Именно по этому атрибуту браузер примет решение, какой файл необходимо загрузить.
Тег <video> имеет несколько важных атрибутов:
controls — Добавляет элементы управления для видеоплеера
autoplay — Автоматическое воспроизведение после загрузки видео
width — Ширина видеоплеера
height — Высота видеоплеера
Атрибуты width и height принимают значения в пикселях, при этом указывать единицу измерения не нужно.
Ссылка на видео: https://www.w3schools.com/html/movie.mp4
У видеоплеера должны быть элементы управления
Высота плеера: 240
Ширина плеера: 320
Путь к файлу укажите в теге <video>
На всякий случай сделайте звук потише, в видео есть звук 😉
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Если используется один файл, то достаточно добавить атрибут src для тега <video>. В остальных случаях используйте теги <source>
Формат mp4 корректно обрабатывается большинством браузеров. По возможности используйте именно его
← Предыдущий
Следующий →
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Как сделать видео на сайте адаптивным
Независимо от того, вставляете ли вы на сайт видео html5 тегом video или встраиваете с ютуба через iframe, оно должно хорошо адаптироваться под различные устройства.
Вставить и адаптировать HTML5 видео
Для вставки видео на сайт, нужно в HTML разметке внутри блока обертки, прописать тег video, внутри которого через src подключить видео-ролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.
<div>
<video src="video/travaho.mp4" controls poster="video/travaho.jpg">
Ваш браузер не поддерживает HTML5 видео.
</video>
</div>
Если оставить у видео фиксированные размеры, то на экране с разрешением меньше, чем 640 пикселей по ширине, появится горизонтальная полоса прокрутки и может поломаться верстка.
Зададим классу movie ширину 100%, а высоту пусть браузер вычислит автоматически. Ограничим ширину плеера до 500 пикселей.
.movie {
width: 100%;
height: auto;
margin: 0 auto; // выравнивает по центру по вертикали
display: block;
max-width: 500px;
}
Теперь, благодаря нескольким строчкам CSS кода, видео стало адаптивным и пропорционально подстраивается под любую ширину экрана без горизонтальной полосы прокрутки.
Адаптивное видео с Ютуба
Все-таки на большинстве сайтах, мы видим встроенное видео с Ютуба. Как вы понимаете, в
HTML коде для встраивания видео, фиксированные размеры. Значит, сделать его адаптивным – задача веб-мастера.
<iframe src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Мы не можем напрямую повлиять на ширину iframe, как в первом случае. Зато можем создать блок-контейнер и задать ему CSS правила.
<div>сюда вставить код iframe</div>
Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим классу movie-container следующие свойства:
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте
: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Введение в HTML-тег видео
HTML-тег видео полезен, когда вы хотите добавить видео на свои веб-страницы. В современных веб-браузерах добавить видео очень просто. Для этого не нужно устанавливать никаких дополнительных плагинов. Вы можете добавить видео с помощью тега
Что такое HTML-тег
Попробуйте в прямом эфире. Учитесь на Udacity
Примечание. , чтобы остановить автоматическое воспроизведение видео, полностью удалите этот атрибут. Просто изменив его значение на ложь не поможет.
элементы управления указывает, должны ли видео иметь кнопки управления проигрывателем (воспроизведение, пауза, громкость и т. д.):
Пример
<управление видео>
Тег видео не поддерживается в этом браузере.
Try it Live Learn on Udacity
высота и ширина определяют размеры видеоплеера:
Пример
<управление видео>
Тег видео не поддерживается в этом браузере.
Try it Live Learn on Udacity
loop указывает, будет ли видео начинаться заново после его окончания:
Example
<цикл управления видео>
mp4" type="video/mp4">
Тег видео не поддерживается в этом браузере.
Попробуйте в прямом эфире. Учитесь на Udacity
muted указывает, следует ли отключать звук видео при его загрузке:
Пример
<элементы управления видео отключены>
Тег видео не поддерживается в этом браузере.
Попробуйте в прямом эфире. Учитесь на Udacity
poster указывает, будет ли отображаться определенное изображение во время загрузки видео:
Пример
<элементы управления видео poster="/images/video-tag.gif">
Тег видео не поддерживается в этом браузере.
Try it Live Learn on Udacity
preload указывает, как должно загружаться видео при загрузке страницы:
Example
Попробуйте живое обучение на Udacity
Примечание: есть три возможных значения предварительной загрузки : нет (без предварительной загрузки), метаданные (предварительно загружает только метаданные) и автоматически (весь файл предварительно загружен).
src определяет источник URL видеофайла:
Пример
Попробуйте в прямом эфире. Учитесь на Udacity
Примечание. src также поддерживает несколько дорожек для включения субтитров.
Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.
25%; // сохраняет пропорции
Один класс присваивается самому объекту:
mp4" type="video/mp4"> Тег видео не поддерживается в этом браузере.
