Perf: optimisation vidéos page expertise
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s

- Vidéos recompressées (CRF 23, faststart) : 13MB → 3.4MB et 3.7MB
- Champs Kirby dynamiques pour vidéo normale et inverse
- Sources dynamiques via data.backgroundVideo / data.backgroundVideoReverse

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-11 15:54:49 +01:00
parent 84744cd4a3
commit 3a2b5a2f57
5 changed files with 40 additions and 4 deletions

Binary file not shown.

Binary file not shown.

View file

@ -53,3 +53,37 @@ tabs:
- heading
headings:
- 3
media:
label: Médias
icon: image
columns:
- width: 1/2
sections:
mediaFields:
type: fields
fields:
backgroundVideo:
label: Vidéo d'arrière-plan (sens normal)
type: files
layout: cards
max: 1
accept: video/*
translate: false
image:
ratio: 16/9
cover: true
uploads:
template: video
backgroundVideoReverse:
label: Vidéo d'arrière-plan (sens inverse)
type: files
layout: cards
max: 1
accept: video/*
translate: false
image:
ratio: 16/9
cover: true
uploads:
template: video

View file

@ -1,8 +1,10 @@
<?php
$specificData = [
'pageTitle' => $page->writer()->value(),
'items' => $page->body()->toBlocks()->filter(fn($b) => $b->type() === 'text')->map(fn($block) => [
'pageTitle' => $page->writer()->value(),
'backgroundVideo' => $page->backgroundVideo()->toFile()?->url(),
'backgroundVideoReverse' => $page->backgroundVideoReverse()->toFile()?->url(),
'items' => $page->body()->toBlocks()->filter(fn($b) => $b->type() === 'text')->map(fn($block) => [
'text' => $block->text()->value()
])->values()
];

View file

@ -232,7 +232,7 @@
playsinline
preload="auto"
>
<source src="/assets/video/BACKGROUND_VIDEO_MISSION.mp4" type="video/mp4" />
<source src={data.backgroundVideo ?? '/assets/video/BACKGROUND_VIDEO_MISSION.mp4'} type="video/mp4" />
</video>
<video
bind:this={videoRev}
@ -241,7 +241,7 @@
playsinline
preload="auto"
>
<source src="/assets/video/BACKGROUND_VIDEO_MISSION_REVERSE.mp4" type="video/mp4" />
<source src={data.backgroundVideoReverse ?? '/assets/video/BACKGROUND_VIDEO_MISSION_REVERSE.mp4'} type="video/mp4" />
</video>
</div>