悬停 ReactJS 循环播放视频

Question

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

任何帮助将不胜感激:)

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

Answer 1

您可以使用 onEnded 事件和鼠标悬停来循环它。此外，使用 useRef 可以轻松 set/play 而不是从所有回调传递事件。检查下面的代码，

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

Answer 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]);

悬停 ReactJS 循环播放视频

Loop video with hover ReactJS

html

javascript

jsx

reactjs