在React Next.js中取消视频onMouseEnter

2w2cym1i 于 12个月前发布在 React

关注(0)|答案(1)|浏览(139)

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

next.js

来源：https://stackoverflow.com/questions/73611021/unmute-video-onmouseenter-in-react-next-js

1条答案

按热度按时间

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>

赞(0）回复(0）举报 12个月前

我来回答

在React Next.js中取消视频onMouseEnter

1条答案

相关问题

热门标签

最新问答