mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero loop: add H.264 mp4 fallback source for old Safari/iOS

Browse Source 
Transcoded the VP9 webm to H.264 mp4 (~220KB) and add it as a second <source>
after the webm — modern browsers take the smaller VP9, pre-2021 Safari/iOS fall
back to mp4. JS appends both sources before load().

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 21:16:00 -07:00
parent acf161a192
commit 8691e083a4
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/media/hero-loop.mp4
BIN
View File
Binary file not shown.
index.html
+7 -4
View File
@@ -91,7 +91,7 @@
</div> </div>
</div> </div>
<div class="hero-media" aria-hidden="true"> <div class="hero-media" aria-hidden="true">
<video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video> <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm" data-src-mp4="assets/media/hero-loop.mp4"></video>
</div> </div>
</section> </section>
@@ -374,9 +374,12 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
var conn = navigator.connection || {}; var conn = navigator.connection || {};
if (conn.saveData === true) return; if (conn.saveData === true) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var src = hv.getAttribute('data-src'); if (!src) return; var webm = hv.getAttribute('data-src'), mp4 = hv.getAttribute('data-src-mp4');
var s = document.createElement('source'); s.src = src; s.type = 'video/webm'; if (!webm && !mp4) return;
hv.appendChild(s); hv.load(); function addSrc(u, t) { if (!u) return; var s = document.createElement('source'); s.src = u; s.type = t; hv.appendChild(s); }
addSrc(webm, 'video/webm'); // modern browsers pick this (smaller VP9)
addSrc(mp4, 'video/mp4'); // old Safari / iOS fall back to H.264
hv.load();
hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true }); hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
var p = hv.play(); if (p && p.catch) p.catch(function () {}); var p = hv.play(); if (p && p.catch) p.catch(function () {});
})(); })();