我试图嵌入一个非常短的视频与HTML标签到我的nextjs页面。视频最初是静音的,应该在悬停时播放声音。我对它的失败感到非常困惑,所以我把它放在那里,希望有人能给出答案(或者提示在哪里寻找它)。
我现在的代码:
App = () => {
const [muted, setMuted] = useState(true);
return (
<video autoPlay loop onMouseEnter={() => setMuted(false)} muted={muted} >
<source src='/filename.mp4'>
</video>
)}
悬停时,静音状态如预期的那样设置为false。但是页面的行为非常奇怪。在Firefox中,视频只是停留在悬停状态。在Chrome上,它继续静音运行,直到我点击视频,然后声音打开。而微软Edge通常会停止(和火狐一样),但有时它会在点击时播放声音,就像Chrome一样。此外,在devtools中检查元素,属性实际上并没有改变。即使声音正在运行,在Chrome中仍然设置为“静音”,在Firefox中所有属性都等于空字符串(autoplay=””)。我不知道该怎么办。任何帮助都非常感谢:)
1条答案
按热度按时间rur96b6h1#
嘿,为了播放你的视频,你可能会得到更好的结果与视频使用参考。所以你可以做的是使用useRef钩子创建一个ref,然后给予ref到你的视频元素,在鼠标悬停时使用该ref取消静音你的视频,因为react中的ref工作得更好,我也使用了ref,它对我很有效。我会告诉你我是怎么做的
在这里,我仍然使用isMuted状态来更新UI,显示静音和取消静音的声音图标,以及更新视频元素的声音。
因此,ref根据isMuted的值将视频的静音元素设置为true和false。所以我才能帮自己修好它。
这是我实现的一段代码我从其他地方切换静音功能,但在您的情况下,您可以使用