Safari blocks play() on video despite being called from click event

javascript html video safari media
Max Mumford picture Max Mumford · Nov 14, 2017 · Viewed 8k times · Source

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?

Answer

Max Mumford picture Max Mumford · Nov 15, 2017

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>

Related questions

changing source on html5 video tag

i'm trying to build a video player, that works everywhere. so far i'd be going with: <video> <source src="video.mp4"></source> <source src="video.ogv"></source> <object data="…

Read More
Detect if HTML5 Video element is playing

I've looked through a couple of questions to find out if an HTML5 element is playing, but can't find the answer. I've looked at the W3 documentation and it has an event named "playing" but I can't seem to get …

Read More
How to change the playing speed of videos in HTML5?

How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.Any help would be appreciated!

Read More