Видео можно разделить на две категории: то, которое требует нажатия кнопки «плей» для воспроизведения, и то, которое стартует автоматически.
Рассмотрим, как автовоспроизведение влияет на пользователей и как сделать его на сайте.
Эффект может быть как положительный, так и отрицательный.
С одной стороны, автозапуск позволяет сразу показать видео, без необходимости нажимать на кнопку воспроизведения. Это полезно при демонстрации продукта или объяснении сложных концепций. Но некоторые посетители считают автозапуск раздражающим, особенно если они не ожидали этого или если звук включен по умолчанию. Автовоспроизведение может потреблять больше ресурсов и увеличивать затраты на трафик, особенно для пользователей с ограниченным интернет-соединением или мобильных устройств.
Сделать автовоспроизведение приятным для пользователей поможет:
Рассмотрим два варианта работы: с загрузкой на хостинг и c использованием сервиса YouTube.
Загрузите медиафайл на сервер или хостинг.
В HTML-документе вставьте код для воспроизведения видео. Для этого используется тег <video>:
<video> <source src="sample.mp4" type="video/mp4"> </video> |
В нашем случае:
Добавьте атрибут 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. Он позволяет настроить вид отображения, параметры запуска (включая автоматический запуск) и добавить видео на сайт двумя строчками кода.