Media Playback with PWA: keep playing when phone locked?

I have found that audio and video files don’t play if the phone goes to the lock screen or the site is in the background, in the case the user is accessing the forum through the PWA setting (having downloaded it to their home screen).

Is there a way to change this, to enable lock screen/background playback when accessed by PWA?


Here’s what’s surprising to me: When you access the forum straight from the web, audio and video are able to play when the phone is locked and when the site goes to the background. The main issue arises when in PWA.

I see this behavior on iphone.


Further Detail

When a user is on their phone, I’m hoping that audio and media files can keep playing when the phone is locked or the site itself is in the background.

On iOS, I find the basic behavior is ok in both cases, if the user accesses the site from the mobile web:

–For audio files (mp3, etc.), the file keeps playing when the phone is on lock and when the site goes to the background. That’s perfect.

–For video files (mp4, etc.), the file stops playing when the phone is on lock or when the site goes to the background. But, there is a play button the users can hit on the lock screen to start it again, and the users can start playing the video again when the site is in the background by opening up the control center and hitting play.

However, if the user accesses the site through the PWA, neither work. When the phone goes to lock or the site goes to background, all playback is stopped, and there is no option to start playing again (until unlocking and going into the site again).

2 Likes

This is for locally uploaded files right? Not embed stuff like Youtube videos?

1 Like

I’ve actually seen the same behavior for both locally uploaded files and embeds. My particular focus right now is embeds.

1 Like

Okay, so let’s add a youtube video to test:

1 Like

The youtube vid seems to act the same for mobile mobile safari and pwa–you can’t play it in the background or on lock screen. That could be bc youtube is unique (they block background playing unless you subscribe to youtube premium, for example, and that could have impact here).

Here’s some other examples:

Vimeo embed:

And audio embed:


I find that both work as I have described on iphone:
–on mobile safari access, you can play both in the background and on lock screen (only difference is that the video stops playing when the phone changes state to lock/background, and you have to hit play again)

–on pwa access, neither play in background or lock screen (there is no further play option in either case once app goes to background or phone goes to lock screen)

2 Likes

Just so I’m on the same page as you, you are talking about iOS behavior right?

2 Likes

Yes. I only have an iphone to test with. Can’t speak to android. (And all of these embeds–both video and audio–play in the background fine for Mac chrome and Mac safari, and also PWA on desktop. Issue here is mobile, and in my case iphone.)

2 Likes

Is there a way to have video and audio media in the PWA keep playing in background/locked screen on iphone like it does on the mobile web?

1 Like

No, because iOS doesn’t support this for PWAs.

4 Likes

That is clarifying to hear. Thanks for the info.

I think this was fixed in ios 15? Any updates?

This works on Android, PWA or not.

In fact, embedding in a webpage permits you to play the videos audio whilst you have a locked screen, but this doesn’t work in the YouTube app.