Как обеспечить воспроизведение видео на iPhone при активном энергосберегающем режиме: Практическое руководство

Введение

В мире, где телефоны стали неотъемлемой частью нашей повседневной жизни, доля мобильного трафика перевалила за 60%, и продолжает расти. И при разработке сайтов становится просто жизненно необходимо учитывать максимальное количество нюансов для корректного отображения информации. Одним из таких нюансов обладает Iphone, а именно «Автоплей видео при включенном энергосберегающем режиме».

Проблема

Согласно политике движка Chromium, на котором работают подавляющее большинство современных браузеров, медиаконтент разрешен к автозапуску при соблюдении следующих условий:

• Содержимое отключено или не содержит аудио (только видео);
• Пользователь коснулся или кликнул по какому-либо месту на сайте во время сеанса просмотра;
• На мобильном устройстве, если сайт был заблокирован добавлен на главный экран пользователем.

Браузеры на iOS работают на движке WebKit. К счастью, их политика не отличается от политики Chromium.

Тег <video> будут учитывать атрибут autoplay при следующих условиях:

• <video> элементы будут разрешены autoplay без жеста пользователя, если их исходный носитель не содержит звуковых дорожек.
• <video muted> элементам также будет разрешено автозапуск без жестов пользователя.
• <video autoplay> элементы начнут воспроизводиться только тогда, когда они видны на экране, например, когда они прокручиваются в окне просмотра, становятся видимыми с помощью CSS и вставляются в DOM.
• <video autoplay> элементы будут приостановлены, если они станут невидимыми, например, при прокрутке за пределы области просмотра.

Но тут незаметно подкрадывается неявная проблема: автоплей видео на мобильном iOS при включенном энергосберегающем режиме

Эту проблему, как и огромное количество других, мы можем решить с помощью JavaScript

document.addEventListener('touchstart', () => {
    document.querySelectorAll('video').forEach(video => video.play())
})

Ловим касание пользователя по экрану смартфона, получаем все видео и перебором запускаем видео. Достаточно элегантное решение всего в две строки, и, казалось бы, на этом можно закончить статью. Но есть кейс, когда это решение не подходит: если видео находится на первом экране. По касанию видео также запустится, но при загрузке его будет встречать нативная круглая кнопка запуска видео. Но и для этого есть своё решение.

Да, да, вам не показалось, эту проблему решает обычный html. Это решение я нашел в документации WebKit, и выглядит оно очень специфичное. На ум может прийти мысль перевести видео в формат GIF и закинуть в тег <img>. Почти…

Они говорят, что GIF тяжелый и очень энергозатратный, от себя добавлю что еще и шакалистый. Поэтому они предлагают вместо GIF в <img> засунуть видео:

<picture>
    <source srcset="explosion.mp4" type="video/mp4">
    <img src="explosion.jpg" alt="An image of an explosion.">
</picture>

Благодаря размещению ваших видеороликов в <img> элементах контент загружается быстрее, потребляет меньше энергии аккумулятора и повышает производительность. А для обеспечения совместимости с другими веб-браузерами также включите резервное изображение, а оно вам пригодится, т.к. видео в теге <img> воспринимается только iOS, на остальных платформах у вас ничего не будет.

Ссылка на документацию WebKit

В конце хочу сказать, что решение проблемы нужно выбирать, основываясь на конкретной ситуации. Выбрав первый вариант, вы рискуете отпугнуть пользователя страшной кнопкой на главном экране, а во-втором, нужно будет предусматривать вариант для других устройств. Развивайтесь, развивайте других, и мир станет чуточку лучше.