MP4 Video - Safari Showing "Unhandled Promise Rejection: [object DOMError]" in Console

Question

I have a group of MP4 videos which will play when the container is hovered. Please see the 3 images at the bottom of this page for a demo:

https://ts133842-container.zoeysite.com/

This works great in Chrome, however in Safari the video will not play and the console is showing the error when hovering.

Unhandled Promise Rejection: [object DOMError]

I've searched for a solution but haven't been able to find a fix. Please see my code below:

<div class="video-container">
  <video loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>

jQuery(".video-container").hover(hoverVideo, hideVideo);

function hoverVideo(e) {  
  jQuery('video', this).get(0).play();
  jQuery(this).find('.image-container').css('display', 'none');
}

function hideVideo(e) {
  jQuery('video', this).get(0).currentTime = 0;
  jQuery('video', this).get(0).pause();
  jQuery(this).find('.image-container').css('display', 'block');
}

Could anybody share any insight as to why Safari is throwing this error? Thank you very much in advance.

Edit: I've now noticed that this doesn't work on an iPad or iPhone, so isn't just a desktop Safari issue. I'm not sure why I can't find more information about this error online however.

Answer 1

This may be an issue with Safari video playback of auto play videos at the moment (auto play in mobile video is an ever changing world at the moment so new releases can bring new behaviour).

The webkit.org, which Safari is built on, recommendation is to not assume any media will autoplay, as browsers often allow users set preferences in this area also. Their recommendation is to check and if necessary add a button or some control to allow the user play the video - if you look at the example they give below you will see it is actually looking for the error you see:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

As an aside, there seems to be an issue on some devices with Safari not playing a video (or more accurately not showing the video it is playing) when the attribute 'controls' is not included. It would be worth checking to see if this makes any difference also, although the above check should still be used as a safety measure even if that does work.

In your case the resulting HTML5 with the controls attribute added would just be:

<div class="video-container">
  <video loop muted preload="auto" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>