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.