Actualmente, tengo un reproductor de video.js con React. Mi objetivo es activar una función cuando el usuario comienza a reproducir el video y activar una función separada cuando el usuario vuelve a reproducir el video después de pausar el video (llamemos a esto el evento "continuar"). ¿Cómo puedo lograr esto sin activar la función incorrecta al inicio y continuar?
He examinado varios eventos de medios HTML diferentes, como 'reproducir' y 'reproducir' , sin embargo, la función "continuar" aún se activa al inicio.
Esto es lo que tengo:
const VideoPlayer = ({ handleOnPlayContinue, handleOnStart }) => { const [hasStarted, setHasStarted] = useState(false); useEffect(() => { videoJSPlayer.on('play'), () => { setHasStarted(true); }; videoJSPlayer.on('playing'), () => { handleOnPlayContinue(); }; }, [videoJSPlayer, handleOnPlayContinue]); useEffect(() => { if (hasStarted) { handleOnStart(); } }, [hasStarted, handleOnStart]); }¿Debería alternar otro estado booleano en 'pausa' y usar ese indicador booleano para activar mi función de continuación? Pensé en configurar otro estado para administrar cuando el usuario continúa con el video después de hacer una pausa, pero quería saber si hay otro evento de medios HTML que pueda aprovechar.
¡Gracias por cualquier consejo y respuesta que pueda tener!
No creo que haya un evento de medios HTML relevante; tendrá que administrarlo usted mismo con el estado y solo dentro del evento de play . Vea si lo siguiente funciona para lo que está tratando de lograr (no he podido probarlo). Tenga en cuenta que los cambios de estado en useEffect no se actualizan sincrónicamente, y hasStarted debe estar en la matriz de dependencia; de lo contrario, el evento hará referencia a variables de estado obsoletas. También queremos limpiar los detectores de eventos entre las llamadas useEffect .
const VideoPlayer = ({ handleOnPlayContinue, handleOnStart }) => { const [hasStarted, setHasStarted] = useState(false); useEffect(() => { videoJSPlayer.on("play", () => { if (!hasStarted) { handleOnStart(); setHasStarted(true); } else { handleOnPlayContinue(); } }); return () => { videoJSPlayer.off("play"); }; }, [hasStarted, handleOnPlayContinue, handleOnStart, videoJSPlayer]); };