Index > Fix vidéos non prise en charges dans le slider
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
This commit is contained in:
parent
c92e492fbc
commit
9a615bd92d
7 changed files with 97 additions and 81 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue