如何在鼠标悬停时停止背景gif'；当gif在JavaScript中移动并悬停时，是否移动并恢复gif？

当我在另一个窗口上时，我试图停止背景gif，因为它会占用资源。当身体没有检测到任何鼠标移动或悬停时，是否有方法停止此操作

如果您能解释一下它是如何完成的，我们将不胜感激

正文{
背景：url（'https://i.pinimg.com/originals/f1/63/11/f16311fd0c32786525f471c685bc516e.gif'）没有固定的重复中心；
背景尺寸：封面；
身高：100%
宽度：100%
}

背景GIF

正如@NVRM所提到的，“使用视频会更容易”，根据这一建议，我曾经将gif转换为mp4视频格式，这使整个过程变得更容易

我使用了

窗口。onload

功能在视频第一次打开时自动播放视频

从那里，我可以使用

document.onmouseout

在光标离开主体/文档时暂停视频，并在光标进入主体/文档时使用

document.onmousemove

恢复视频。

onmousemove

还允许在因鼠标未移动而暂停视频时恢复视频

为了检测鼠标是否移动，我使用了这个函数，它使用

setInterval（）

函数来检测鼠标是否在特定的时间范围内没有移动，如果是，它将在函数中执行代码，在这种情况下，暂停视频

为了在鼠标离开该窗口时清除无鼠标检测器功能，我在

文档中使用了
clearInterval（）
。onmouseout

函数，否则，它会一直认为鼠标不在正文/文档中时没有移动，浪费资源

const video=document.getElementById（“背景”）；
window.onload=函数（）{
video.play（）；
};
document.onmouseout=函数（）{
视频暂停（）
清除间隔（超时）；
};
document.onmousemove=函数（）{
video.play（）；
};
var超时；
document.onmouseover=函数（）{
清除间隔（超时）；
timeout=setInterval（函数（）{
video.pause（）；
}, 8888); 
}

*{
保证金：0；
填充：0；
溢出：隐藏；
}
#背景{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-1000；
过渡：0.2s；
}

背景测试

可能是可能的，但使用视频会更容易，因为所有这些事件都很容易附加。查找一些方法。。我看到了一些不稳定的方法，比如

window.stop

，还有一些与代码不兼容的方法，比如question@NVRM如果正确，则不能暂停gif。您可以停止gif，但如果再次添加gif，它将不会从同一位置恢复。改用视频。好的，你知道有什么工具可以将gif转换成视频吗？你可以将gif转换成png（至少一个png），然后用css将背景从gif转换成png。我希望这不需要太多的交通。