Как вставить видео в HTML

5
(11)
«Как вставить видео в HTML?» Это вопрос, который интересует многих веб-мастеров и создателей сайтов. Однако, необходимо понимать, что правильное размещение видео на сайте может оказать серьезное влияние на его посещаемость и рейтинг в поисковых системах, так же с помощью видео можно более информативно донести цели повествования. В этой статье мы рассмотрим различные способы вставки видео в HTML.

Существует несколько способов добавления видео на сайт в HTML код. Рассмотрим самые популярные из них.

Первый способ

– использование тега <video>. Данный тег позволяет вставить видео на страницу сайта без использования сторонних плагинов. Тег <video> был добавлен в HTML5 и позволяет вставлять видео на веб-страницы без использования стороннего кода. Для вставки видео необходимо указать путь к видеофайлу и несколько атрибутов, таких как ширина и высота видео, контролы и автовоспроизведение.

Пример использования тега <video>:

HTML
<video src="video.mp4" controls></video>

<!-- Более подробный вариант -->

<video width="320" height="240" controls autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Результат будет такой:

Второй способ

– использование сторонних сервисов для размещения видео. Например, YouTube или Vimeo. Данные сервисы предоставляют код для вставки видео на сайт, который можно скопировать и вставить на страницу. При этом, видео будет загружаться с серверов этих сервисов, что позволит уменьшить нагрузку на ваш сайт и ускорить его загрузку. 
HTML
<iframe 
width="560"
height="315"
src="https://www.youtube.com/embed/VaDvc0DiHbM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>


Результат будет такой:

Третий способ

– использование JavaScript библиотек для вставки видео. Например, jPlayer, Video.js или JW Player. Данные библиотеки позволяют создавать кроссбраузерные и адаптивные видеоплееры с множеством настроек и возможностей. Независимо от выбранного способа, необходимо учитывать следующие моменты:
  •  Поддержка форматов видео различными браузерами;
  •  Оптимизация размера видео и его кодеков для ускорения загрузки страницы;
  •  Использование альтернативного текста для видео (для улучшения доступности сайта для людей с ограниченными возможностями).

Пример использования плагина Video.js для вставки видео:

HTML
<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>

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

Атрибуты тега video HTML – это настройки, которые контролируют визуальное и функциональное поведение видеоплеера на веб-страницах. В этой статье мы рассмотрим некоторые из самых популярных атрибутов тега video HTML и опишем, как эти атрибуты могут помочь улучшить пользовательский опыт.
  1. src

Атрибут src указывает путь к видеофайлу, который будет воспроизводиться на веб-странице. Важно отметить, что для использования атрибута src видеофайл должен быть доступен по заданному пути.
<video src="video.mp4"></video>
  1. width и height

Атрибуты width и height позволяют задать ширину и высоту плеера видео на веб-странице. Эти атрибуты влияют на размер видео на странице и могут быть заданы в пикселях или процентах.
<video src="video.mp4" width="640" height="360"></video>
  1. controls

Атрибут controls добавляет элементы управления видеоплеером, такие как кнопки воспроизведения, паузы, переключения в полноэкранный режим и т.д.
<video src="video.mp4" controls></video>
  1. autoplay

Атрибут autoplay позволяет автоматически воспроизводить видео после загрузки страницы.
<video src="video.mp4" autoplay></video>
  1. loop

Атрибут loop позволяет циклически воспроизводить видео после окончания воспроизведения.
<video src="video.mp4" loop></video>
  1. poster

Атрибут poster позволяет установить изображение, которое будет отображаться вместо видео до его воспроизведения или при остановке видеоплеера.
<video src="video.mp4" poster="poster.jpg"></video>
  1. preload

Атрибут preload задает, должно ли видео загружаться при загрузке страницы или же в процессе воспроизведения. Принимает значения «auto», «metadata» и «none».
<video src="video.mp4" preload="auto"></video>
В данной статье были рассмотрены наиболее важные атрибуты тега <video> HTML. Однако, их настройка в сочетании с другими параметрами может улучшить пользовательский опыт на сайте.

Осознаное знание того, — «Как вставить видео в HTML?» – это важный элемент его оптимизации сайта, можно значительно улучшить конкурирующие возможности своего сайта и привлечь больше внимания целевых аудиторий. Правильно размещенное видео может привлечь дополнительный трафик на сайт и улучшить его позиции в поисковых системах. Не забывайте об этом при создании своего сайта.

Как стать профессионалом в Вебе

Качественный и быстрый скачок в Веб разработке, естественно могут дать только профессионалы и я вижу быстрый и правильный рост только через онлайн курсы, из своего опыта сделал подборку здесь много бесплатных и платных курсов!

Skillbox.ru
Loftschool.com
Hexlet.io
Geekbrains
Udemy.com
Здесь Вы обучитесь правильному Веб программированию и не только!
Получить много навыков!

Поделиться ссылкой:

Насколько был полезен этот пост?

Кликни что бы проголосовать

Средний рейтинг 5 / 5. Всего голосов 11

Пока нет голосов, будьте первым кто оценит этот пост.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *