Html теги для вставки видео на сайт

Всем привет. Сегодня я поделюсь с вами html тегами для вставки видео на свой сайт. По сути, сегодня я их рассмотрю всего 3 штуки, самых распространенных.

Как вставить видео с помощью html5?

Итак, версия html5 подарила нам новые теги, в числе которых есть и video. Чтобы вставить видео с помощью этого тега, в самом минимальном случае нам понадобится его написать, а в его содержимом указать 1-3 одинарных тега source, в которых указать путь к видеоролику. Вот так:

<video width = "300" height = "200" controls>
<source src = "video.mp4">
</video>

Результат:

Это просто картинка, не пытайтесь нажать на воспроизведение) Но если вы возьмете реальное видео, поместите его в папку с веб-страницей и выведете на странице таким образом, то оно именно так и отобразится.

Атрибуты тега video

Давайте кратко пробежимся по атрибутам тега video. Как вы могли заметить, я прописал размер видео с помощью атрибутов width и height, но вообще это можно без проблем делать и через css. Остальные атрибуты:

1. controls — добавляет к видео элементы управления. То есть можно будет останавливать его, расширять, изменять громкость.
2. autoplay — если этот атрибут задан, то воспроизведение видео начнется сразу после загрузки веб-страницы. Учитывайте, что это может раздражать пользователей.
3. loop — если прописан этот параметр, то видео начнется сначала сразу после своего завершения. В некоторых случаях актуально, когда видео короткое, например.
4. preload — позволяет начать загрузку видео вместе с загрузкой веб-страницы. Спорная возможность. С одной стороны, так пользователь сможет кликнуть по видео и сразу начнется его воспроизведение. С другой, у многих людей ограничен трафик. Возможно, они и не хотят смотреть видео, а оно у них грузиться и забирает трафик. Так что смотрите сами, как вы будете использовать этот параметр.
5. poster — позволяет задать картинку-постер, которая будет выводиться, когда видео еще не включено.

Это все атрибуты этого тега. Естественно, все они необязательные.

Атрибуты тега source и как правильно добавить видео на страницу?

Как я уже говорил, что source — это одинарный тег. Вообще у него есть всего 1 обязательный параметр — src. Это путь к видеоролику. Важно прописать его правильно. Помимо этого, есть атрибут type, но для современных браузеров его прописывать необязательно, так как они сами умеют определять расширение видео. Но если что, вот значения атрибутов type для разных форматов видео, может быть вам пригодится:
Ogg - type='video/ogg; codecs="theora, vorbis"'
mp4 - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
webm - type='video/webm; codecs="vp8, vorbis"'

В общем, в чем вся фишка вставки видеофайла через тег video? В том, что разные браузеры поддерживают разные форматы. Наиболее оптимальным форматом является как раз mp4 — его поддерживают все, кроме Opera. Так что если вы хотите, чтобы владельцы оперы тоже видели видео, нужно его вставлять еще в одном формате. Например, в формате ogg. Его opera поддерживает. В таком случае напишем вот что:

<video width = "300" height = "200" controls>
<source src = "video.mp4">
<source src = "video.ogg">
</video>

Вот и все. Атрибуты рассмотрели, момент с расширениями тоже рассмотрели. Теперь вы знаете, как вставлять видео в html5. Какие-то оформительские вещи вы можете прописать через css. Естественно, видео вам придется грузить себе на сервер.

Вставка видео через тег iframe

Есть и другой вариант вставки видео. Он актуален для роликов с ютуба, например. Когда вы смотрите видео, нажмите ниже на вкладку Поделиться, после чего выберете html-код. Вот этот код вставьте себе на сайт в нужное вам место. Например, вот вам топ-10 голов прошедшего Евро-2016:

Шаблон:

<iframe width="" height="" src="тут адрес" allowfullscreen></iframe>

Соответственно, прописывается ширина и высота фрейма, далее в атрибуте src нужно указать адрес видео с youtube. Атрибут allowfullscreen разрешает при необходимости расширить видео на весь экран. В общем-то, тег имеет и другие атрибуты, но они вам не нужны.

Итог

Вот такие 2 способа. Второй подойдет для видеороликов, которые уже есть на youtube, первый — для собственных видео, которые вы загружаете непосредственно на сервер и не хотите публиковать на ютубе. Используйте их, они актуальны. Если какие-то вопросы, пишите в комменты.