41 lines
916 B
TypeScript
41 lines
916 B
TypeScript
// components/VideoPlayer.js
|
|
import React, { forwardRef } from "react";
|
|
type VideoPlayerProps = {
|
|
url: string;
|
|
onPlay?: () => void;
|
|
onPause?: () => void;
|
|
};
|
|
|
|
const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
|
({ url, onPause, onPlay }, ref) => {
|
|
return (
|
|
<div className="video-player object-cover">
|
|
<video
|
|
ref={ref}
|
|
controls
|
|
preload="metadata"
|
|
onPlay={onPlay}
|
|
onPause={onPause}
|
|
>
|
|
<source src={url} type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<style jsx>{`
|
|
.video-player {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
video {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
VideoPlayer.displayName = "VideoPlayer";
|
|
|
|
export default VideoPlayer;
|