Index > Fix vidéos non prise en charges dans le slider
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s

This commit is contained in:
Camilledenoray 2026-06-17 12:25:23 +02:00
parent c92e492fbc
commit 9a615bd92d
7 changed files with 97 additions and 81 deletions

View file

@ -14,6 +14,7 @@
</li>
<?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
<?php $slides = $project->slideshow()->toFiles(); ?>
<li class="project" data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
<div class="fix">
<button class="project-toggler grid">
@ -21,20 +22,39 @@
<span> <?= $project->tags() ?> </span>
<span class="date"> <?= $project->date()->toDate('Y') ?> </span>
</button>
<span class="slide-number"><span class="current-image">1</span>/<?= $project->images()->count() ?></span>
<span class="slide-number"><span class="current-image">1</span>/<?= $slides->count() ?></span>
</div>
<section class="toggle">
<div class= "project-slideshow-container">
<button class="closer"></button>
<div class="project-slideshow">
<?php foreach ($project->images() as $image): ?>
<?php snippet('picture', [
'file' => $image,
'srcsetName' => 'project-slideshow',
'sizes' => '(min-width: 1000px) 50vw, 100vw',
'lazy' => $image->indexOf() !== 0,
'class' => $image->indexOf() === 0 ? 'active' : null,
]) ?>
<?php foreach ($slides->values() as $i => $slide): ?>
<?php if ($slide->type() === 'video'): ?>
<?php
// Type web fiable basé sur l'extension : le mime() de Kirby
// peut renvoyer video/quicktime pour un .mp4 (fichier .mov
// renommé), ce que Chrome/Firefox refusent de lire.
$videoTypes = [
'mp4' => 'video/mp4',
'm4v' => 'video/mp4',
'mov' => 'video/mp4',
'webm' => 'video/webm',
'ogv' => 'video/ogg',
];
$videoType = $videoTypes[strtolower($slide->extension())] ?? $slide->mime();
?>
<video class="slide<?= $i === 0 ? ' active' : '' ?>" autoplay muted loop playsinline data-id="<?= $slide->uuid() ?>">
<source src="<?= $slide->url() ?>" type="<?= $videoType ?>">
</video>
<?php else: ?>
<?php snippet('picture', [
'file' => $slide,
'srcsetName' => 'project-slideshow',
'sizes' => '(min-width: 1000px) 50vw, 100vw',
'lazy' => $i !== 0,
'class' => $i === 0 ? 'slide active' : 'slide',
]) ?>
<?php endif ?>
<?php endforeach; ?>
<button class="prev"></button>
<button class="next"></button>