使用悬停 ReactJS 循环播放视频答案

【问题标题】：Loop video with hover ReactJS使用悬停 ReactJS 循环播放视频
【发布时间】：2021-12-13 03:25:38
【问题描述】：

我正在尝试在渲染时自动播放视频，但只播放一次。在悬停效果上，我希望它循环播放视频。我曾尝试在 mouseOver 上使用 event.target.play() 但没有运气。

任何帮助将不胜感激:)

<video 
  className="videos" 
  autoPlay={true} 
  onMouseOver={event => event.target.play()} 
  onMouseOut={event => event.target.pause()} 
  muted={true}
  src={prompt}>
</video>

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

您可以使用 onEnded 事件和 mouseover 来循环它。还使用 useRef 可以轻松设置/播放，而不是从所有回调中传递事件。检查下面的代码，

import { useEffect, useRef, useState } from "react";
import testVideo from "./testVideo.mp4";

export default function App() {
  const ref = useRef(null);
  const [focus, setFocus] = useState(false);

  const loop = () => {
    ref.current.play();
  };

  const onEndedLoop = () => {
    if (focus) loop(); // when ended check if its focused then loop
  };

  useEffect(() => {
    if (focus) loop(); // when focused then loop
  }, [focus]);

  return (
    <div className="App">
      <h2>Loop video with hover ReactJS!</h2>
      <video
        id="video"
        ref={ref}
        style={{ width: "300px" }}
        autoPlay
        onMouseOver={() => setFocus(true)}
        onMouseOut={() => setFocus(false)}
        muted={true}
        src={testVideo}
        onEnded={onEndedLoop}
      ></video>
    </div>
  );
}

检查工作演示 - https://codesandbox.io/s/loop-video-on-hover-qegu7

【讨论】：

非常感谢！这很好用。现在您对如何在单个页面上为 5 个视频提供此功能有什么建议吗？我试图做出一些解决方法，因为 useRef() 仅适用于单个视频。我会多次创建这些功能吗？我相信有一种更有效的方法。再次感谢您:) 非常感谢
您可能想将此作为新问题提出，因为您的原始问题已得到解答。
@IcarusBuckhold：对于多个视频元素，您需要使用单独的参考。因此您可以创建 refs 数组，并将索引传递给事件处理程序以进行进一步的更改。无需创建单独的事件处理程序。如果您将上述答案标记为正确，我将不胜感激。

【解决方案2】：

@Madhuri 有很好的答案（我赞成）。但是，如果我们添加一个在未聚焦时暂停循环的功能，那么它将仅在聚焦时循环视频，并在未悬停或未聚焦时停止。

const loop = () => {
    ref.current.play();
  };

  const pauseLoop = () => {
    ref.current.pause();
  };

  const onEndedLoop = () => {
    if (focus) loop(); // when ended check if its focused then loop
  };

  useEffect(() => {
    if (focus) loop(); // when focused then loop
    if (!focus) pauseLoop(); // when not focused then pause loop
  }, [focus]);

【讨论】：

在 useEffect 中添加 pauseLoop 功能时，将失去在页面第一次渲染时运行自动播放的能力。无论如何要改变这一点，以使焦点不是错误的或真实的。使焦点真实需要我悬停并远离视频以强制它停止，否则无论我的鼠标是否悬停，它都会保持循环。感谢您的洞察力！
当然，如果你设置const [focus, setFocus] = useState(true)当页面加载时，因为焦点为真，视频会播放。它也将在悬停时播放。但是，一旦您将鼠标悬停，视频就会暂停，直到您再次将鼠标悬停。