Created attachment 355140 [details]
Set the following Content-Security-Policy (CSP) header:
default-src 'none'; img-src 'self'; media-src 'self'; report-uri http://localhost/csp-reports
And a sample document:
<video autoplay controls>
<source src="./video.mp4" type="video/mp4">
The video should load and start auto playing. When hovering the video, you should see standard controls and be able to interact with them. This is browser UI and should just work. Works fine in Chromium and Firefox.
The video will autoplay and the default UI toolbars will display. However, the button icons are invisible and the user can’t interact with them. Safari also reports a CSP violation about having blocked data:image/svg files to http://localhost/csp-reports
As a workaround I use the CSP policy `img-src 'self' data:`
The same happens in Chrome on iOS, so it's not a Safari bug, but most likely, as usual, one of Apple's weird policies.