Video in "Add a video" example not rendering on Mobile Safari with a NotAllowedError (same example from mapbox-gl is rendering without errors)

[johanrd]

maplibre-gl-js version: https://unpkg.com/[email protected]/dist/maplibre-gl.js

browser: Mobile safari 18.3

Steps to Trigger Behavior

1. Go to https://maplibre.org/maplibre-gl-js/docs/examples/video-on-a-map/ on mobile safari 18.3
2. See that the video in the example is not rendering.
3. Inspect with safari dev tools, and see that the following error appears in the console:

Unhandled Promise Rejection: NotAllowedError: 
The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. 
(video_source.ts:94)

Expected Behavior

1. Go to the corresponding example in mapbox: https://docs.mapbox.com/mapbox-gl-js/example/video-on-a-map/
2. See that the video renders correctly in the mapbox example
3. Inspect with dev tools, and see that there is no NotAllowedError from the play method.

[HarelM]

Are you sure you did not declined a request for permission?
I don't have a iOS device to test this, so you'll need to dig into it for fixing this.

[johanrd]

@HarelM Yes, I can confirm that I haven't declined any relevant request for permission. (though, not sure which permission would be relevant)

I have now tested with three different iOS devices, and it seems like the issue is reproducible on iOS 18 (iPhone), but not reproducible on iPad with iOS 15:

browser	mapbox-gl example	maplibre-gl example
Mobile Safari 15.8.3 (iPad mini 4 2015)	✅ video renders	✅ video renders
Mobile Safari 18.1.1 (iPhone 13 2021)	✅ video renders	❌ NotAllowedError
Mobile Safari 18.3.0 (iPhone 13 mini 2021)	✅ video renders	❌ NotAllowedError

This could of course be Mobile Safari bug, but it is assuring that the examples from mapbox are working.