31 lines
663 B
TypeScript
31 lines
663 B
TypeScript
import { useEffect, useRef } from "react";
|
|
import { useOnScreen } from "~/hooks/useOnScreen";
|
|
|
|
export function AutoplayVideo({ src }: { src: string }) {
|
|
const elementRef = useRef<HTMLVideoElement>(null);
|
|
const isOnScreen = useOnScreen(elementRef);
|
|
|
|
useEffect(() => {
|
|
if (elementRef.current == null) return;
|
|
|
|
elementRef.current.muted = true;
|
|
elementRef.current.playsInline = true;
|
|
|
|
if (isOnScreen) {
|
|
elementRef.current.play();
|
|
} else {
|
|
elementRef.current.pause();
|
|
}
|
|
}, [isOnScreen]);
|
|
|
|
return (
|
|
<video
|
|
src={src}
|
|
ref={elementRef}
|
|
loop={true}
|
|
muted={true}
|
|
autoPlay={false}
|
|
/>
|
|
);
|
|
}
|