Safari blocks play() on video despite being called from click event
Eugh. The solution was to use an absolute path for the video source, not a relative one.
This is wrong: <video src="assets/vid.mp4"></video>
This is correct: <video src="http://example.com/assets/vid.mp4"></video>
It's worth noting that this error occurs whenever you call .play()
on a video that Safari has failed to load.
Something else interesting is that Safari requires the web server to support the byte-range requests to correctly load video files. See note here: https://stackoverflow.com/a/36299252
I recently had an issue with serving files from the php command line process instead of a dedicated web server like Apache or nginx and couldn't work out why videos were playing on the live site, but not in my development environment.
A quick way to determine this is to load the video directly from the address bar. If it fails to load, your server likely doesn't support byte-range requests.