37 lines
940 B
TypeScript
37 lines
940 B
TypeScript
import { forwardRef } from "react";
|
|
|
|
interface VideoPlayerProps {
|
|
src?: string;
|
|
poster?: string;
|
|
className?: string;
|
|
/** Seek to this many seconds after metadata loads (broadcast sync on refresh). */
|
|
initialOffset?: number;
|
|
}
|
|
|
|
const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
|
({ src, poster, className, initialOffset }, ref) => {
|
|
return (
|
|
<div className={`relative h-full w-full bg-black ${className ?? ""}`}>
|
|
<video
|
|
ref={ref}
|
|
src={src}
|
|
poster={poster}
|
|
autoPlay
|
|
playsInline
|
|
onLoadedMetadata={(e) => {
|
|
if (initialOffset && initialOffset > 0) {
|
|
e.currentTarget.currentTime = initialOffset;
|
|
}
|
|
}}
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
VideoPlayer.displayName = "VideoPlayer";
|
|
|
|
export { VideoPlayer };
|
|
export type { VideoPlayerProps };
|