Estoy tratando de reproducir automáticamente un video cuando se procesa, pero solo una vez. En el efecto de desplazamiento, me gustaría reproducir el video con un bucle. He intentado usar event.target.play() en mouseOver pero no he tenido suerte.
Cualquier ayuda sería muy apreciada :)
<video className="videos" autoPlay={true} onMouseOver={event => event.target.play()} onMouseOut={event => event.target.pause()} muted={true} src={prompt}> </video>Puede usar el evento onEnded junto con el mouseover para repetirlo. Además, el uso de useRef facilita la configuración/reproducción en lugar de pasar el evento de todas las devoluciones de llamada. Verifique el código a continuación,
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> ); }verifique la demostración de trabajo: https://codesandbox.io/s/loop-video-on-hover-qegu7
@Madhuri tiene una buena respuesta (que voté). Sin embargo, si agregamos una función para pausar el bucle cuando no está enfocado, el video se reproducirá en bucle solo cuando esté enfocado y se detendrá cuando no se desplace o no esté enfocado.
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]);