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

admin管理员组

文章数量:1333210

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:

/

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.

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./

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.

• javascript
• jquery
• video
• safari

Share Improve this question Follow edited Nov 22, 2017 at 10:02 matt136 asked Nov 22, 2017 at 9:50 matt136matt136 6311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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, which Safari is built on, remendation is to not assume any media will autoplay, as browsers often allow users set preferences in this area also. Their remendation 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>

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.

本文标签：