diff options
| author | William Hergès <william@herges.fr> | 2025-08-10 16:05:38 +0200 |
|---|---|---|
| committer | William Hergès <william@herges.fr> | 2025-08-10 16:05:59 +0200 |
| commit | 993877357dc3c4c4dcac838209e56ca4c6f79959 (patch) | |
| tree | d46c8ad450e03a9fcd33ac3a3883aa7e9eb260d3 /src | |
| parent | 8b193399ee31add29bfe1b53cbf754bad23fef78 (diff) | |
perf(video): display thumbnail for mobile
Diffstat (limited to 'src')
| -rw-r--r-- | src/component/VideoAuto.astro | 17 | ||||
| -rw-r--r-- | src/pages/index.astro | 6 |
2 files changed, 15 insertions, 8 deletions
diff --git a/src/component/VideoAuto.astro b/src/component/VideoAuto.astro index ddfe1c8..8746b68 100644 --- a/src/component/VideoAuto.astro +++ b/src/component/VideoAuto.astro @@ -1,16 +1,23 @@ --- -const { src } = Astro.props; +const { src, thumb } = Astro.props; --- -<video muted loop> - <source src={src} /> -</video> +<img src={thumb} data-video={src} alt="Video thumbnail" /> <script> window.addEventListener("load", () => { - document.querySelectorAll("video").forEach((video) => { + document.querySelectorAll("img[data-video]").forEach((img) => { if (window.screen.width < 1000) return; + const video = document.createElement("video"); + video.muted = true; + video.defaultMuted = true; + video.loop = true; video.autoplay = true; + const source = document.createElement("source"); + source.src = img.getAttribute("data-video"); + video.appendChild(source); + img.parentNode.insertBefore(video, img); + img.parentNode.removeChild(img); }); }); </script> diff --git a/src/pages/index.astro b/src/pages/index.astro index 3f793b6..4e8ac17 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -24,16 +24,16 @@ import Base from "../layout/Base.astro"; <MosaicBackground height="400"> <img src="/batteur/old2.webp" /> <img src="/batteur/old3.webp" /> - <VideoAuto src="/batteur/video/bb.webm" /> + <VideoAuto src="/batteur/video/bb.webm" thumb="/batteur/bb.webp" /> <img src="/batteur/dark_scene.webp" /> - <VideoAuto src="/batteur/video/balance.webm" /> + <VideoAuto src="/batteur/video/balance.webm" thumb="/batteur/balance.webp" /> <img src="/batteur/black_and_white.webp" /> <img src="/batteur/old.webp" /> <img src="/batteur/mid_rock.webp" /> <img src="/batteur/mid_outdoor.webp" /> <img src="/batteur/mid_rock2.webp" /> <img src="/batteur/recent.webp" /> - <VideoAuto src="/batteur/video/solo.webm" /> + <VideoAuto src="/batteur/video/solo.webm" thumb="/batteur/solo.webp" /> </MosaicBackground> <div class="content"> <div class="content__header"> |