Фоновое видео не запускается: что показать вместо него
Если фоновое видео не запускается, первый экран всё равно должен показывать понятное предложение и доступную кнопку. Разделите отказ автозапуска, ошибку файла и намеренный выбор уменьшить движение. Заранее подготовьте статичный вид и проверяйте фактический результат воспроизведения. Настройка muted не является обещанием успешного запуска в любых условиях.
Сначала спроектируйте первый экран без движения
В учебном макете посетитель видит короткий заголовок, пояснение и кнопку перехода к услуге. Видео добавляет атмосферу, но не содержит единственное объяснение продукта. Если оставить смысл только в ролике, отказ запуска превращает страницу в непонятную обложку. Основной текст должен оставаться частью интерфейса независимо от медиасостояния.
Выберите запасной кадр или самостоятельное изображение, на котором текст читается так же, как на видео. Проверьте контраст и размещение кнопки на разных участках кадра. Не принимайте решение по одной остановленной красивой сцене, если в других сценах заголовок теряется. Это стоит включить в задание на разработку сайта вместе с состоянием без ролика.
Отказ политики и неисправный ресурс — разные ветви
В руководстве MDN по autoplay разобраны ограничения автоматического воспроизведения и проверка вызова play(). Его Promise позволяет узнать об успешном начале или отказе. NotAllowedError связан с разрешением воспроизведения, а другие ошибки нужно разбирать отдельно. Добавление атрибута в шаблон не подтверждает, что изображение уже движется.
Если запуск запрещён, предложите допустимое ручное действие либо оставьте статичный экран. Если файл не загружается или не поддерживается, ручная кнопка сама по себе не исправит ресурс. В диагностике нужны фактический источник, выбранный формат и результат попытки, без бесконечного повторения одного и того же действия.
Матрица первого экрана
Ниже — собственные требования к макету. Это сценарии приёмки, а не результаты проверки конкретных браузеров или устройств.
| Условие | Состояние ролика | Что видит человек | Главное действие | Как проверить |
|---|---|---|---|---|
| Загрузка ещё не закончена | Начало не подтверждено | Готовый статичный вид без пустого прямоугольника | Кнопка страницы доступна | Ограничить загрузку в тестовой среде и не ждать видео |
| Запуск разрешён и подтверждён | Идёт воспроизведение | Текст и управление поверх подходящего оформления | Кнопка не перекрыта плеером | Проверить разные кадры, прокрутку и управление |
| Autoplay отклонён | Автоматически не играет | Статичный кадр и понятный необязательный запуск | Переход к услуге работает сразу | Сверить результат отказа и состояние кнопок |
| Предпочтение уменьшить движение | Выбран спокойный вариант | Статичная композиция по принятой политике | Смысл и действие сохранены | Проверить настройку предпочтения и новый заход |
| Ошибка медиаресурса | Не играет | Рабочий запасной вид без бесконечной загрузки | Кнопка страницы продолжает работать | Подставить управляемую тестовую ошибку |
| Посетитель поставил на паузу | Остановлен по его выбору | Стабильный кадр и доступное управление | Выбор посетителя не сбрасывается самовольно | Убедиться, что таймер не запускает ролик снова |
Успех запуска не угадывают по установленному флагу
Состояние «играет» должно соответствовать наблюдаемому результату. Не скрывайте запасной кадр сразу после команды, если ещё неизвестно, что воспроизведение началось. И не показывайте управляющую кнопку паузы вместо запуска только потому, что разработчик намеревался включить видео автоматически.
Когда пользователь выбирает ручное воспроизведение, обработайте и его результат. Возможность попытаться не равна гарантии успеха: условия ресурса и среды всё ещё важны. При повторном отказе оставьте человеку понятный экран, а техническую причину передайте в предусмотренную диагностику. Не заставляйте его несколько раз нажимать, чтобы узнать, что функция недоступна.
Muted и playsinline проверяются в контексте
Отключённый звук и воспроизведение без перехода в отдельный полноэкранный режим могут быть частью выбранной настройки. Но правильность конкретного сочетания подтверждают в поддерживаемых браузерах. Не переносите пример другого плеера как гарантию для всех телефонов. Наличие видеодорожки, аудиодорожки и реально заданных настроек нужно рассматривать вместе.
У интерактивного веб-приложения видео может зависеть и от переходов между экранами. Проверьте возвращение назад и смену размера окна: не остаётся ли невидимый плеер поверх кнопки, не запускается ли звук неожиданно и не исчезает ли текст при смене состояния. Это вопросы поведения интерфейса, а не только формата исходного файла.
Предпочтение меньше движения не означает сломанный сайт
MDN описывает prefers-reduced-motion как способ определить пользовательское предпочтение уменьшить несущественное движение. Само чтение этого признака не останавливает любой ролик автоматически. Приложение должно выбрать и реализовать соответствующий вариант, например статичный первый экран без фоновой анимации.
Не обходите этот выбор попытками запуска по таймеру. Если движение декоративное, сохраните смысл и композицию без него. При необходимости ручного просмотра дайте понятное управление, не превращая видео в условие доступа к содержанию. У пользователя должна оставаться возможность остановить выбранное воспроизведение по согласованному сценарию.
Запасной кадр не является правилом загрузки
Отдельно решите, когда загружается тяжёлый ресурс и что происходит на медленном соединении. Наличие poster или другой картинки само по себе не доказывает экономию трафика: файл видео может продолжать запрашиваться. Если требуется ограничить загрузку в определённом режиме, это самостоятельное требование, которое проверяют по фактическим запросам.
Для собственной инфраструктуры доступность и выдачу медиаресурса можно исследовать в рамках поддержки сервера. Но перед изменением параметров размещения установите, в какой ветви находится проблема. Отказ пользовательской политики не исправляется заменой сервера, а неисправный адрес не становится рабочим от отключения звука.
Приёмка на компьютере и телефоне
- Утвердите статичный первый экран: текст, изображение и основную кнопку. Откройте его в сценарии, где видео совсем недоступно.
- Проверьте успешное начало и ручную паузу на согласованных браузерах. Не ограничивайтесь машиной разработчика и одним кадром.
- Воспроизведите отказ автозапуска и ошибку ресурса отдельно. Состояния интерфейса должны объяснять допустимое действие, не обещая невозможный запуск.
- Испытайте предпочтение уменьшить движение. Сайт должен выполнять выбранную спокойную модель без таймеров обхода.
- Проверьте медленную загрузку, поворот экрана, возврат на страницу и доступность основной кнопки во всех состояниях.
- Запишите поддерживаемые условия и наблюдаемый результат. Передавайте подрядчику эти сценарии вместе с макетом, а не требование «пусть играет всегда».
Вопросы и ответы
Почему video autoplay не работает на телефоне?
Возможны ограничения воспроизведения, особенности ресурса и настройки среды. Нужно проверить результат попытки и отделить отказ политики от ошибки загрузки, сохранив рабочий статичный экран.
Гарантирует ли autoplay muted запуск фонового видео?
Это часть настройки, но не подтверждение успешного воспроизведения в любых условиях. Приложение должно обработать фактический результат и предусмотреть запасной вид.
Что означает prefers-reduced-motion для фона сайта?
Это предпочтение пользователя уменьшить несущественное движение. Разработчик должен реализовать выбранную реакцию, например статичную композицию, сохранив смысл и доступность действий.