66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { useRef, useState } from "react";
|
|
|
|
import bgShadow from "&/images/global/card-shadow.svg";
|
|
import videoThumb from "&/images/global/header.png";
|
|
import playIcon from "&/images/icons/bouton play.svg";
|
|
|
|
export default function VideoFrame() {
|
|
const [playing, setPlaying] = useState(false);
|
|
const ref = useRef<HTMLVideoElement>(null);
|
|
|
|
const start = (): void => {
|
|
setPlaying(true);
|
|
requestAnimationFrame(() => {
|
|
void ref.current?.play();
|
|
});
|
|
};
|
|
|
|
const videoSrc = "/storage/videos/motion.mp4";
|
|
|
|
return (
|
|
<div className="relative z-10 mx-auto w-full max-w-full sm:w-[1020px]">
|
|
<div className="relative aspect-video overflow-hidden bg-black">
|
|
{playing ? (
|
|
<video
|
|
ref={ref}
|
|
src={videoSrc}
|
|
className="h-full w-full object-cover"
|
|
controls
|
|
playsInline
|
|
preload="none"
|
|
>
|
|
<track kind="captions"></track>
|
|
</video>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={start}
|
|
aria-label="Lire la vidéo"
|
|
className="group flex h-full w-full items-center justify-center"
|
|
>
|
|
{/* thumbnail */}
|
|
<img
|
|
src={videoThumb}
|
|
alt="Vidéo présentant les valeurs de Ker Chant"
|
|
title="Découvrir ker Chant en vidéo"
|
|
className="absolute inset-0 h-[127%] w-full object-cover"
|
|
/>
|
|
{/* icône play */}
|
|
<img
|
|
src={playIcon}
|
|
alt="Play"
|
|
className="relative w-20 transition-transform group-hover:scale-110 sm:w-28"
|
|
/>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<img
|
|
src={bgShadow}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute bottom-0 left-0 -z-10 w-full max-w-none sm:translate-y-5 translate-y-3"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|