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

Как вставить (разместить, добавить) видео в html код сайта 
До недавнего времени вопрос как вставить видео в html код сайта доставлял неподготовленному вебмастеру некоторые проблемы. Зачастую ролики воспроизводились с помощью сторонних скриптов, например, самые популярные решения были реализованы на технологии Флеш. Однако флеш себя несколько дискредитировал в плане безопасности. Поэтому для унификации возможности вставки (размещения) видео в HTML код различные веб-платформ в новейшую версию кода языка HTML 5 был внедрен тег <video> ⤵️ :
<video>
 <source src="URL">
</video>

<source src="URL"> - тег, в который вместо URL вписывается адрес Вашего видео, например ⤵️:

<source src="/uploads/files/2020-04/1587393155_preview-video-podpishis-i-postav-lajk-na-prozrachnom-fone.mp4" type="video/mp4">

Самые необходимые атрибуты для вставки видео в html код сайта

Autoplay
Воспроизводиться автоматически после загрузки страницы.
Controls
Добавляет панель управления к видеоролику.
Height
Задает высоту области для воспроизведения видеоролика.
Loop
Повторяет воспроизведение видео с начала после его завершения.
Poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
Preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
Width
Задает ширину области для воспроизведения видеоролика.

Наиболее полный вид html кода для вставки на страницу сайта ⤵️

  <video width="500" height="400" controls="controls" autoplay loop="loop" poster="video/duel.jpg">
   <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.<a href="video/duel.mp4">Скачайте видео</a>.
</video>

Итак, видео будет воспроизводится автоматически (Autoplay) сразу после загрузки, с панелью управления (Controls) и картинкой-заставкой (Poster), так же будет доступна бесконечное проигрывание ролика (Loop) и скачивание видео (правая кнопка мыши-> сохранить как...)

Самую полную информацию о теге <video> вы получите на этой странице🔗.

Вот, собственно, и все. Надеюсь насущный вопрос о том, как добавить видео в html код страницы был полностью решен  smile

Теги

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

Оставить комментарий

    • Смайлы и люди
      Животные и природа
      Еда и напитки
      Активность
      Путешествия и места
      Предметы
      Символы
      Флаги