Приглушенный автозапуск на мобильном устройстве: попрощайтесь с холстами и анимированными GIF-файлами!

Сэм Даттон

Автовоспроизведение видео с отключенным звуком поддерживается Chrome для Android начиная с версии 53. Воспроизведение видеоэлемента начнется автоматически, как только оно появится в поле зрения, если установлены как autoplay , так и muted , а воспроизведение видео с отключенным звуком можно инициировать прагматично с помощью play() . Раньше воспроизведение на мобильном телефоне нужно было инициировать жестом пользователя, независимо от того, был ли отключен звук.

<video playsinline autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

Вы можете увидеть это в действии, посетив этот пример . Воспроизведение видео muted начинается автоматически в Chrome 53 или более поздней версии.

Скриншот видеоплеера.

Кроме того, воспроизведение без звука теперь можно инициировать с помощью метода play() . Раньше play() инициировал воспроизведение только в том случае, если оно происходило в результате жеста пользователя, например нажатия кнопки. Сравните две следующие демонстрации на Android — попробуйте их на Chrome 53, а затем на более старой версии:

Мы рекомендуем использовать атрибут autoplay , когда это возможно, и метод play() только при необходимости.

Можно включить звук видео программно в ответ на жест пользователя, например click , но если вы попытаетесь включить звук видео программно без жеста пользователя, воспроизведение будет приостановлено.

Изменение muted autoplay также позволит использовать play() с video , не созданным в DOM, например, для управления воспроизведением WebGL .

Метод play() также возвращает обещание , которое можно использовать для проверки того, включено ли программное воспроизведение с отключенным звуком. Пример этого можно найти на simpl.info/video/scripted .

Почему изменения?

Автозапуск был отключен в предыдущих версиях Chrome для Android, поскольку он может нарушать работу, требовать много данных и не нравится многим пользователям .

Отключение автозапуска привело к непреднамеренному эффекту, заставив разработчиков использовать такие альтернативы, как анимированные GIF-файлы, а также хаки <canvas> и <img> . Эти методы намного хуже оптимизированного видео с точки зрения энергопотребления, производительности, требований к полосе пропускания, стоимости данных и использования памяти. Видео может обеспечить более высокое качество, чем анимированные GIF-файлы, с гораздо лучшим сжатием: в среднем примерно в 10 раз и в лучшем случае до 100 раз. Декодирование видео в JavaScript возможно , но это сильно расходует заряд батареи.

Сравните следующее: первое — это видео, а второе — анимированный GIF:

Воспроизведение клипа.

Они выглядят очень похоже, но размер видео меньше 200 КБ, а размер анимированного GIF-файла превышает 900 КБ.

Chrome и другие поставщики браузеров крайне осторожны в отношении пропускной способности пользователей. Для многих пользователей во многих контекстах высокая стоимость данных часто является более серьезным препятствием для доступа, чем плохая связь. Учитывая распространенность обходных путей, отключенный автозапуск не может быть заблокирован, поэтому предложение хороших API и настроек по умолчанию — лучшее, что может сделать платформа.

Интернет становится все более медиацентричным . Дизайнеры и разработчики продолжают находить новые и непредвиденные способы использования видео — и они хотят единообразного поведения на разных платформах, например, при использовании фонового видео в качестве элемента дизайна. Отключенный автозапуск обеспечивает подобную функциональность как на мобильных устройствах, так и на настольных компьютерах.

Более тонкие моменты

  • С точки зрения доступности автовоспроизведение может быть особенно проблематичным . В Chrome 53 и более поздних версиях на Android предусмотрена настройка для полного отключения автозапуска: в настройках мультимедиа выберите «Автозапуск».
  • Это изменение не влияет на элемент audio : автовоспроизведение по-прежнему отключено в Chrome на Android, поскольку отключенное автовоспроизведение не имеет особого смысла для аудио.
  • Если включен режим экономии данных , автозапуск отсутствует. Если включен режим экономии данных, автовоспроизведение отключено в настройках мультимедиа.
  • Приглушенный автозапуск будет работать для любого видимого видеоэлемента в любом видимом документе, iframe или другом.
  • Помните, что для того, чтобы воспользоваться преимуществами нового поведения, вам необходимо добавить muted , а также autoplay : сравните simpl.info/video с simpl.info/video/muted .

Поддерживать

  • Беззвучный автозапуск поддерживается Safari на iOS 10 и более поздних версиях.
  • Автозапуск, независимо от того, отключен он или нет, уже поддерживается на Android Firefox и UC Browser: они не блокируют никакой автозапуск.

Узнать больше