I'm creating some custom video controls for an html5 element. I've bound a click event handler to a play/pause button which calls .play() on the corresponding video.
From my research, Safari will block calls to .play() unless you are in a click handler, however it is blocking my calls to .play() despite the fact that I am triggering it from within a click handler, like so:
$('.video-container .play-pause').click(function(event){
var $video = $(event.currentTarget).parent().find('video');
if($video[0].paused)
$video[0].play();
else
$video[0].pause();
});
And the error:
Unhandled Promise Rejection: NotSupportedError (DOM Exception 9): The operation is not supported.
which is originating from $video[0].play();.
Safari Version 11.0.1 (13604.3.5)
OSX High Sierra 10.13.1 (17B48)
Any ideas?
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.
Figured out, that Safari on Mac needs server sending content-type of video/mp4
When I tried to use direct link from document manager, which gave content-type application/mp4, this didn't work (only) in Safari.
