Автовоспроизведение видео на сайте

Видео можно разделить на две категории: то, которое требует нажатия кнопки «плей» для воспроизведения, и то, которое стартует автоматически.

Рассмотрим, как автовоспроизведение влияет на пользователей и как сделать его на сайте.

Влияние на пользователей

Эффект может быть как положительный, так и отрицательный.

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

Советы по использованию

Сделать автовоспроизведение приятным для пользователей поможет:

  1. Регулирование звука и возможность отключения – позволит избежать раздражения.
  2. Длительность. Видео должно быть коротким, чтобы не утомлять посетителей. Рекомендуемая продолжительность от 1 до 3 минут.
  3. Превью и краткое описание – поможет посетителям понять, о чем оно и что они могут ожидать от просмотра.
  4. Поддержка различных устройств и браузеров. Важно убедиться, что автозапуск работает на всех популярных мобильных устройствах, планшетах и браузерах.
     

Инструкция по добавлению

Рассмотрим два варианта работы: с загрузкой на хостинг и c использованием сервиса YouTube.

Загрузите медиафайл на сервер или хостинг.

В HTML-документе вставьте код для воспроизведения видео. Для этого используется тег <video>:

<video>
  <source src="sample.mp4" type="video/mp4">
</video>

В нашем случае: 

  • source src – путь к видео,
  • type – тип видео.

Добавьте атрибут autoplay в тег <video>, чтобы видео автоматически воспроизводилось при загрузке страницы:

<video autoplay>
  <source src="sample.mp4" type="video/mp4">
</video>

Дополнительно можно настроить другие параметры, такие как ширина и высота, управление воспроизведением (кнопки паузы или звука), а также оформление плеера. Изменим ширину видео и добавим кнопки управления.

За это отвечают атрибуты width и controls соответственно.

Итоговый код выглядит так:

<video width="600" controls autoplay>
  <source src="sample.mp4" type="video/mp4" />
</video>

Теперь видео запускается сразу после загрузки страницы

Другим вариантом будет использование YouTube в качестве источника. Так можно сэкономить пространство на сервере и обеспечить более быструю загрузку.

Перейдите на страницу YouTube, найдите и откройте нужное видео.

Под плеером нажмите кнопку Поделиться.

В открывшемся окне выберите вариант «Встроить»

Скопируйте содержимое поля с тегом <iframe> и вставьте в HTML-документ сайта.

У тега iframe в качестве атрибута src передается URL-адрес видео. Для того, чтобы передать элементу дополнительные параметры, нужно поставить знак «?» в самом конце URL и затем перечислить параметры с их значениями в виде:

параметр=значение

Для автозапуска это выглядит так:

autoplay=1

где 1- включено, 0 – отключено.

В нашем случае содержимое атрибута src вместе с параметром автозапуска примет вид:

https://www.youtube.com/embed/VzWDdDrU-8I?si=VTTyVVfcZU7IT-nG?autoplay=1

Автоматическое воспроизведение видео – полезный инструмент, но важно использовать его с умом и учитывать предпочтения пользователей. Некоторые посетители хотят контролировать запуск видео сами. Если нужно удобное решение без необходимости писать код – попробуйте видеовиджет Qform. Он позволяет настроить вид отображения, параметры запуска (включая автоматический запуск) и добавить видео на сайт двумя строчками кода.

Понравилась статья? Поделись!!