feat(projects): video de rolagem na capa dos cards, carregado so quando o card aparece

video autoplay muted loop playsinline preload=none com poster; as fontes entram
via IntersectionObserver e o video pausa fora da tela. Com prefers-reduced-motion
aparece so o poster.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
This commit is contained in:
Evandro Fonseca JuniorandClaude Sonnet 5.5 committed 2026-10-08 11:33:17 -03:00
1 parent ca9c0604b8
commit a67892613b
6 files changed
+276 -2

No files matched your search

+34
View File
@@ -0,0 +1,34 @@
/**
* Vídeos de rolagem dos projetos: public/videos/<id>/desktop.{webm,mp4,webp}.
* Gravados com scripts/record-project-videos.mjs; só entram aqui os ids que têm os três arquivos.
*/
export interface ProjectVideoAsset {
poster: string;
width: number;
height: number;
sources: Array<{ src: string; type: string }>;
}
export const PROJECT_VIDEO_IDS = [
"sev-modaintima",
"lavacao-047",
"nutriscan",
"sc-plus",
"as-servicos",
] as const;
const recorded = new Set<string>(PROJECT_VIDEO_IDS);
export function getProjectVideo(id: string): ProjectVideoAsset | undefined {
if (!recorded.has(id)) return undefined;
const base = `/videos/${id}/desktop`;
return {
poster: `${base}.webp`,
width: 1440,
height: 900,
sources: [
{ src: `${base}.webm`, type: 'video/webm; codecs="vp9"' },
{ src: `${base}.mp4`, type: "video/mp4" },
],
};
}