video source broken on iOS safari

[mollymerp]

mapbox-gl-js version:

Steps to Trigger Behavior

1. navigate to https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/ on safari

Expected Behavior

video plays

Actual Behavior

on desktop, first frame of the video appears on the map, on mobile no frames show up

[anandthakker]

Possibly related: #6152

[mollymerp]

from https://stackoverflow.com/questions/47431439/mp4-video-safari-showing-unhandled-promise-rejection-object-domerror-in-c

The webkit.org, which Safari is built on, recommendation is to not assume any media will autoplay, as browsers often allow users set preferences in this area also. Their recommendation is to check and if necessary add a button or some control to allow the user play the video - if you look at the example they give below you will see it is actually looking for the error you see:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

this does appear to be the issue, but not sure if we want to be responsible for adding playback controls to video sources 💭

[asheemmamoowala]

This is also not working on Chrome for Android.

The error is: Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

[messismore]

Also on Chrome on macOS.

[mollymerp]

Seems that the video on iOS is still not working even after being muted. Adding autoplay = true to the video element gets the first frame to appear on the map, but then fails out again with the uncaught promise

Maybe we should add a catch statement to the .play() promise and show a console error that autoplay isn't supported?

[jfirebaugh]

Try adding a playsinline attribute too. https://webkit.org/blog/6784/new-video-policies-for-ios/

[mollymerp]

I did try that and loop as well with no luck, but I just remembered I'm on the iOS 12 beta and maybe the bug is from that 🤔

[rreusser]

Not 100% certain if other things like the iOS version play into this, but in 2021, it appears that playsinline does affect this and prevents internal video elements used by video sources from seizing fullscreen control, which seems like quite a problematic issue. I've submitted #11067 to address this.