Safari 14 视频在暂停时消失答案

【问题标题】：Safari 14 video disappears when pausingSafari 14 视频在暂停时消失
【发布时间】：2022-08-23 22:00:54
【问题描述】：

我正在使用jQuery事件在鼠标悬停时播放视频并在鼠标悬停时暂停的网页上工作：

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

视频元素具有海报属性。

这在 Firefox 和 Chrome 浏览器上运行良好。它也适用于 Safari/13 和 Safari/15。但是在 Safari/14 和 Safari/12 上，视频消失了。（播放时会重新出现，但暂停时会再次消失。）

如果我添加“控件”属性，它仍然会在鼠标移出时显示控件，但视频是空白的。所以我确定这不是导致视频消失的风格问题。

我不确定如何解决这个问题。我尝试使用 mouseenter/mouseleave 事件，并调整 preload 属性但没有成功。

在 Safari 15 上面临类似问题。您找到解决方案了吗？
@IvanBanha 不是真的。我已经更新了 mouseout 处理程序来检查它是 Safari 12 还是 14，如果是的话。暂停后调用 this.load() 。

标签： javascript html web safari

【解决方案1】：

我在 Safari 15.5 上遇到了同样的问题。在尝试了不同的事情之后，结果证明在 CSS 中为 video 属性添加背景颜色以某种方式解决了这个问题。

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

【讨论】：