Safari 14 video disappears when pausing

user_700771 0
Viewed 173

I am working on a web page where the video is played on mouse over and paused on mouseout, using jQuery events:

$video.on("mouseover", function(e) {
  e.preventDefault();
  this.muted = true;
  this.play();
}).on("mouseout", function(e) {
  e.preventDefault();
  this.pause();
});

The video element has a poster attribute.

This works fine on Firefox and Chrome browsers. It also works fine on Safari/13 and Safari/15. But on Safari/14 and Safari/12, the video disappears. (It reappears while playing, but when pausing, it disappears again.)

If I add the "controls" attribute, it will still show the controls on mouseout, but the video is blank. So I'm sure it's not a style issue that is causing the video to disappear.

I'm not sure how to fix this. I've tried using mousenter/mouseleave events instead, and adjusting the preload attribute without success.

web safari html javascript
1 Answers

I came into the same issue on Safari 15.5. After trying different things, it turns out adding a background-color to the video attribute in CSS somehow fixes the issue.

video {
    max-width: 100%;
    background: #f2f2f2;
}
user_53279250
Related