2024-04-11 07:36:54 +02:00

34 lines
844 B
Plaintext

---
import type { EndpointVideo } from "src/shared/payload/payload-sdk";
import { formatLocale } from "src/utils/format";
interface Props {
video: EndpointVideo;
}
const {
video: { url, thumbnail, mimeType, subtitles },
} = Astro.props;
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<video controls poster={thumbnail?.url} crossorigin="anonymous">
<source src={url} type={mimeType} />
{
subtitles.map(({ language, url }) => (
<track label={formatLocale(language)} src={url} kind="subtitles" srclang={language} />
))
}
</video>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
video {
width: 100%;
border-radius: 16px;
box-shadow: 0 5px 20px -10px var(--color-shadow);
}
</style>