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, первый — для собственных видео, которые вы загружаете непосредственно на сервер и не хотите публиковать на ютубе. Используйте их, они актуальны. Если какие-то вопросы, пишите в комменты.

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Комментариев: 10
  1. Аркадий

    Все прекрасно! Только неплохо было бы написать примерчик добавления в код атрибутов. Я хотел добавить постер и автоплей и, следуя вашему примеру, добавил в код: Но ничего не получилось, причем не только автовоспроизведение не работает, но и принудительно невозможно запустить ролик, есть значок регулировки громкости, но он тоже не шевелится. Возможно, сие все потому, что у меня операционная система ХР sad

  2. Стас

    Спасибо разобрался, вот пример сайта http://gms-partners.ru/ на котором реализован код через iframe

  3. Олег

    Подскажите плиз, возможно ли сделать так, чтобы по наведению курсора включалось видео, а при выведении курсора с видеоокна — видео останавливалось и опять выводился постер? Где можно почитать об этом, какие теги\методы\функции нужно задействовать?

    1. Михаил (автор)

      Здравствуйте. Задача достаточно трудная, я так понимаю, если это и возможно, то только средствами javascript

  4. Светлана

    Заливать видио на сайт нежелательно, это дополнительная нагрузка, которая сильно тормозит скорость открывания страниц. С развитием сайта это будет заметно, так что лучше заливать на ютуб. А второй способ вполне приемлем.

  5. Александр

    Как раз то что мне было нужно. Ибо с заливкой видео на сайт испытывал проблемы.

    1. Михаил (автор)

      Надеюсь, поможет. Если будут вопросы, то пишите

  6. Юрий Ваценко

    По-моему, очень уж все замудрено тут. Заходишь в ютюбчик, берешь внизу видоса код, вставляешь его на статью и вуаля.

    1. Михаил (автор)

      Ну да, это второй способ, простой. Но если видео нет на ютубе и не хочется его туда заливать, то подойдет первый

      1. Юрий Ваценко

        Спорить не буду, но данный способ, который подразумевает ковырение в коде, уж очень заумный.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: