在React Next.js中取消视频onMouseEnter

2w2cym1i  于 2023-10-18  发布在  React
关注(0)|答案(1)|浏览(153)

我试图嵌入一个非常短的视频与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=””)。我不知道该怎么办。任何帮助都非常感谢:)

rur96b6h

rur96b6h1#

嘿,为了播放你的视频,你可能会得到更好的结果与视频使用参考。所以你可以做的是使用useRef钩子创建一个ref,然后给予ref到你的视频元素,在鼠标悬停时使用该ref取消静音你的视频,因为react中的ref工作得更好,我也使用了ref,它对我很有效。我会告诉你我是怎么做的

// 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>

在这里,我仍然使用isMuted状态来更新UI,显示静音和取消静音的声音图标,以及更新视频元素的声音。
因此,ref根据isMuted的值将视频的静音元素设置为true和false。所以我才能帮自己修好它。
这是我实现的一段代码我从其他地方切换静音功能,但在您的情况下,您可以使用

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

相关问题