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

user_8988153 0
Viewed 8413

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.

safari video jquery javascript
2 Answers

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>
user_3344020

2021:

If you want to play audio in Javascript, just put an AudioContext at the top (or in the constructor):

const AudioContext = window.AudioContext || window.webkitAudioContext;
    this.ambience = new AudioContext();

Tested with Safari 15 and Chrome.

user_162665130
Related