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

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/

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

Solution 2:

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.