Воспроизведение медиа в PWA: продолжать воспроизведение при заблокированном телефоне?

Я обнаружил, что аудио- и видеофайлы не воспроизводятся, если телефон переходит в заблокированное состояние или сайт находится в фоновом режиме, когда пользователь получает доступ к форуму через настройки PWA (после загрузки на главный экран).

Есть ли способ изменить это, чтобы включить воспроизведение в заблокированном состоянии и в фоновом режиме при доступе через PWA?


Что меня удивляет: когда вы получаете доступ к форуму напрямую через веб-браузер, аудио и видео могут воспроизводиться, даже если телефон заблокирован или сайт находится в фоновом режиме. Основная проблема возникает именно при использовании PWA.

Я наблюдаю такое поведение на iPhone.


Дополнительные детали

Когда пользователь находится на телефоне, я надеюсь, что аудио- и медиафайлы могут продолжать воспроизводиться, даже если телефон заблокирован или сайт находится в фоновом режиме.

На iOS базовое поведение в обоих случаях приемлемо, если пользователь получает доступ к сайту через мобильный веб:

– Для аудиофайлов (mp3 и др.) файл продолжает воспроизводиться, когда телефон заблокирован, и когда сайт уходит в фон. Это идеально.

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

Однако, если пользователь получает доступ к сайту через PWA, ни один из этих вариантов не работает. Когда телефон блокируется или сайт уходит в фон, все воспроизведение останавливается, и нет возможности возобновить его (пока пользователь не разблокирует телефон и не вернется на сайт).

2 лайка

Это для локально загруженных файлов, верно? Не для встраиваемого контента, вроде видео с YouTube?

1 лайк

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

1 лайк

Хорошо, давайте добавим видео с YouTube для проверки:

1 лайк

Видео на YouTube ведёт себя одинаково в мобильном Safari и в PWA — воспроизведение в фоновом режиме или на заблокированном экране невозможно. Возможно, это связано с тем, что YouTube имеет свои особенности: например, они блокируют фоновое воспроизведение, если у вас нет подписки YouTube Premium, что может влиять на ситуацию здесь.

Вот ещё несколько примеров:

Вставка Vimeo:
https://vimeo.com/175708185

Вставка аудио:


Я обнаружил, что оба варианта работают на iPhone следующим образом:

— При доступе через мобильный Safari можно воспроизводить оба файла в фоновом режиме и на заблокированном экране (единственное отличие: видео останавливается, когда телефон переходит в состояние блокировки или фоновый режим, и нужно снова нажать кнопку воспроизведения).

— При доступе через PWA ни один из файлов не воспроизводится в фоновом режиме или на заблокированном экране (после перехода приложения в фоновый режим или блокировки телефона дополнительных опций воспроизведения нет).

2 лайка

Чтобы мы понимали друг друга правильно, вы говорите именно о поведении iOS, верно?

2 лайка

Да. У меня для тестов только iPhone. По Android ничего сказать не могу. (Все эти встроенные элементы — и видео, и аудио — отлично работают в фоновом режиме в Chrome и Safari на Mac, а также в PWA на десктопе. Проблема здесь именно в мобильных устройствах, а в моём случае — в iPhone.)

2 лайка

Можно ли настроить так, чтобы видео и аудио в PWA продолжали воспроизводиться в фоновом режиме или при заблокированном экране на iPhone, как это происходит в мобильной версии сайта?

1 лайк

Нет, потому что iOS не поддерживает это для PWA.

4 лайка

Хорошо это слышать. Спасибо за информацию.

Думаю, это исправили в iOS 15? Есть какие-то обновления?

На Android это работает, независимо от того, используется PWA или нет.

Более того, встраивание видео на веб-страницу позволяет воспроизводить аудио даже при заблокированном экране, но это не работает в приложении YouTube.