Как обеспечить воспроизведение видео на iPhone при активном энергосберегающем режиме: Практическое руководство
Введение
В мире, где телефоны стали неотъемлемой частью нашей повседневной жизни, доля мобильного трафика перевалила за 60%, и продолжает расти. И при разработке сайтов становится просто жизненно необходимо учитывать максимальное количество нюансов для корректного отображения информации. Одним из таких нюансов обладает Iphone, а именно «Автоплей видео при включенном энергосберегающем режиме».
Проблема
Согласно политике движка Chromium, на котором работают подавляющее большиство современных браузеров, медиаконтент разрешен к автозапуску при соблюдении следующих условий:
- Содержимое отключено или не содержит аудио (только видео);
- Пользователь коснулся или кликнул по какому-либо месту на сайте во время сеанса просмотра;
- На мобильном устройстве, если сайт был заблокирован добавлен на главный экран пользователем.
Бразуеры на iOS работают на движке WebKit. К счастью, их политика не отличается от политики Chromium.
Тег <video> будут учитывать атрибут autoplay при следующих условиях:
<video>элементы будут разрешены autoplay без жеста пользователя, если их исходный носитель не содержит звуковых дорожек.<video muted>элементам также будет разрешено автозапуск без жестов пользователя.<video autoplay>элементы начнут воспроизводиться только тогда, когда они видны на экране, например, когда они прокручиваются в окне просмотра, становятся видимыми с помощью CSS и вставляются в DOM.<video autoplay>элементы будут приостановлены, если они станут невидимыми, например, при прокрутке за пределы области просмотра.
Но тут незаметно подкрадывается неявная проблема: автоплей видео на мобильном iOS при включенном энергосберегающем режиме
Решение
Всемогущий JavaScript
Эту проблему, как и огромное количество других, мы можем решить с помощью JavaScript
document.addEventListener('touchstart', () => {
document.querySelectorAll('video').forEach(video => video.play())
})
Ловим касание пользователя по экрану смартфона, получаем все видео и перебором запускаем видео. Достаточно элегантное решение всего в две строки, и, казалось бы, на этом можно закончить статью. Но есть кейс, когда это решение не подходит: если видео находится на первом экране. По касанию видео также запустится, но при загрузке его будет встречать нативная круглая кнопка запуска видео. Но и для этого есть своё решение.
HTML
Да, да, вам не показалось, эту проблему решает обычный 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, на остальных платформах у вас ничего не будет.
Заключение
В конце хочу сказать, что решение проблемы нужно выбирать основываясь на конкретной ситуации. Выбрав первый вариант, вы рискуете отпугнуть пользователя страшной кнопкой на главном экране, а во-втором, нужно будет предусматривать вариант для других устройств. Развивайтесь, развивайте других и мир станет чуточку лучше.