React Next.js 中的MouseEnter 取消静音视频

Question

我正在尝试将带有 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 上，它会继续静音运行，直到我单击视频，然后声音打开。 Microsoft Edge 通常会停止（与 Firefox 相同），但有时会像 Chrome 一样在单击时以看似随意的间隔播放声音...... 另外，检查 devtools 中的元素，属性实际上并没有改变。即使声音正在运行，它在 Chrome 中仍然设置为“静音”，而在 Firefox 中，所有属性都等于空字符串 (autoplay="")。 我不知道从这里该去哪里。非常感谢任何帮助:)

Answer 1

嘿，为了播放您的视频，使用视频参考可能会获得更好的结果。所以你可以做的是使用 useRef 钩子创建一个引用，并将引用提供给你的视频元素，然后在鼠标悬停时使用该引用取消视频静音，因为引用在反应中工作得更好，我也使用了引用，它对我有用。我会告诉你我是如何做到的

    // first create the ref
    const videoRef = useRef<HTMLVideoElement>(null);
    const [isMuted, setIsMuted] = useState(false);


    const handleMute = (event: React.MouseEvent<HTMLImageElement>) => {
    
      setIsMuted((prev) => {
      if (videoRef) {
       videoRef.current!.muted = !prev;
       }

    return !prev;
    });
   };


    <video
      onClick={onVideoClick}
      ref={videoRef}
      src={mobile}
      className="hero-modal-video block h-full w-full cursor-pointer 
      object-cover md:hidden "
      autoPlay

      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
      poster={videoThumbNail}
      playsInline
      onEnded={handleVideoEnded}

      //   loop
    ></video>

这里我仍然使用 isMulated 状态来更新 ui，显示静音和未静音的声音图标，并更新视频元素的声音。

因此 ref 正在根据 isMulated 的值将视频的 muted 元素设置为 true 和 false。这就是我能够为我修复它的方法。

这是我实现的一段代码。我正在从其他地方切换handleMute函数，但在你的情况下，你可以使用

调用它

  <video 
   autoPlay 
   loop 
   onMouseEnter={handleMute}
   muted={muted}  // you can remove this attribute
    >
  <source src='/filename.mp4'>
 </video>