AV1 hero, 1/3rd the size

src/routes/+page.svelte

@@ -17,8 +17,15 @@
   import RecordingsIcon from "$lib/icons/features/recordings.svg?raw";
 
   const CDN_BASE = "https://3comma.net";
-  const HeroLandscapeVideo = `${CDN_BASE}/hero-landscape/hero-landscape.m3u8`;
-  const HeroPortraitVideo = `${CDN_BASE}/hero-portrait/hero-portrait.m3u8`;
+  const AV1_FMP4_TYPE = 'video/mp4; codecs="av01.0.08M.08"';
+  const HeroLandscapeVideo = {
+    av1: `${CDN_BASE}/hero-landscape-av1/hero-landscape.m3u8`,
+    h264: `${CDN_BASE}/hero-landscape/hero-landscape.m3u8`,
+  };
+  const HeroPortraitVideo = {
+    av1: `${CDN_BASE}/hero-portrait-av1/hero-portrait.m3u8`,
+    h264: `${CDN_BASE}/hero-portrait/hero-portrait.m3u8`,
+  };
   const ScreenVideo = `${CDN_BASE}/screen-video/screen-video.m3u8`;
 
   let videoLandscapeElement;
@@ -31,25 +38,76 @@
   // Hardcode GitHub star count (similar to contributors on openpilot page)
   const githubStars = 50000;
 
-  function initializeHLS(videoEl, src, onReady) {
-    if (Hls.isSupported()) {
+  function mediaSourceSupports(mimeType) {
+    const MediaSourceConstructor = typeof Hls.getMediaSource === 'function'
+      ? Hls.getMediaSource()
+      : typeof window !== 'undefined'
+        ? window.MediaSource
+        : null;
+
+    return Boolean(MediaSourceConstructor?.isTypeSupported?.(mimeType));
+  }
+
+  function canUseHlsJsForAv1() {
+    return Boolean(
+      typeof Hls.isMSESupported === 'function' &&
+      Hls.isMSESupported() &&
+      mediaSourceSupports(AV1_FMP4_TYPE)
+    );
+  }
+
+  function canPlayAv1HLS(videoEl) {
+    const nativeHlsAv1 = videoEl.canPlayType('application/vnd.apple.mpegurl') &&
+      videoEl.canPlayType(AV1_FMP4_TYPE);
+
+    return canUseHlsJsForAv1() || Boolean(nativeHlsAv1);
+  }
+
+  function getPreferredVideoSource(videoEl, sources) {
+    return canPlayAv1HLS(videoEl) ? sources.av1 : sources.h264;
+  }
+
+  function initializeHLS(videoEl, src, onReady, onFatalError) {
+    const isAv1HlsSource = src.includes('-av1/');
+
+    if (Hls.isSupported() || (isAv1HlsSource && canUseHlsJsForAv1())) {
       const hls = new Hls();
       hls.loadSource(src);
       hls.attachMedia(videoEl);
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
         if (onReady) onReady();
       });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        if (data.fatal && onFatalError) onFatalError(hls);
+      });
       return hls;
     } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
       videoEl.src = src;
       videoEl.addEventListener('loadedmetadata', () => {
         if (onReady) onReady();
       });
+      videoEl.addEventListener('error', () => {
+        if (onFatalError) onFatalError(null);
+      }, { once: true });
       return null;
     }
     return null;
   }
 
+  function initializeHeroHLS(videoEl, sources, onReady) {
+    const preferredSrc = getPreferredVideoSource(videoEl, sources);
+
+    initializeHLS(videoEl, preferredSrc, onReady, (hls) => {
+      if (preferredSrc !== sources.av1) return;
+
+      if (hls) hls.destroy();
+      videoEl.pause();
+      videoEl.removeAttribute('src');
+      videoEl.load();
+      initializeHLS(videoEl, sources.h264, onReady);
+    });
+  }
+
   // TODO: don't load both mobile and desktop videos on initial load
   onMount(async () => {
     // const isMobile = typeof window !== 'undefined' && window.innerWidth < 769;
@@ -59,7 +117,7 @@
       videoLandscapeElement.addEventListener('playing', () => {
         videoLandscapeReady = true;
       });
-      initializeHLS(videoLandscapeElement, HeroLandscapeVideo, () => {
+      initializeHeroHLS(videoLandscapeElement, HeroLandscapeVideo, () => {
         videoLandscapeElement.play();
       });
     }
@@ -69,7 +127,7 @@
       videoPortraitElement.addEventListener('playing', () => {
         videoPortraitReady = true;
       });
-      initializeHLS(videoPortraitElement, HeroPortraitVideo, () => {
+      initializeHeroHLS(videoPortraitElement, HeroPortraitVideo, () => {
         videoPortraitElement.play();
       });
     }

static/videos/hero-landscape-av1/hero-landscape.m3u8

@@ -0,0 +1,44 @@
+#EXTM3U
+#EXT-X-VERSION:7
+#EXT-X-TARGETDURATION:4
+#EXT-X-MEDIA-SEQUENCE:0
+#EXT-X-PLAYLIST-TYPE:VOD
+#EXT-X-INDEPENDENT-SEGMENTS
+#EXT-X-MAP:URI="init.mp4"
+#EXTINF:4.000000,
+part_000.m4s
+#EXTINF:4.000000,
+part_001.m4s
+#EXTINF:4.000000,
+part_002.m4s
+#EXTINF:4.000000,
+part_003.m4s
+#EXTINF:4.000000,
+part_004.m4s
+#EXTINF:4.000000,
+part_005.m4s
+#EXTINF:4.000000,
+part_006.m4s
+#EXTINF:4.000000,
+part_007.m4s
+#EXTINF:4.000000,
+part_008.m4s
+#EXTINF:4.000000,
+part_009.m4s
+#EXTINF:4.000000,
+part_010.m4s
+#EXTINF:4.000000,
+part_011.m4s
+#EXTINF:4.000000,
+part_012.m4s
+#EXTINF:4.000000,
+part_013.m4s
+#EXTINF:4.000000,
+part_014.m4s
+#EXTINF:4.000000,
+part_015.m4s
+#EXTINF:4.000000,
+part_016.m4s
+#EXTINF:1.233333,
+part_017.m4s
+#EXT-X-ENDLIST

static/videos/hero-portrait-av1/hero-portrait.m3u8

@@ -0,0 +1,44 @@
+#EXTM3U
+#EXT-X-VERSION:7
+#EXT-X-TARGETDURATION:4
+#EXT-X-MEDIA-SEQUENCE:0
+#EXT-X-PLAYLIST-TYPE:VOD
+#EXT-X-INDEPENDENT-SEGMENTS
+#EXT-X-MAP:URI="init.mp4"
+#EXTINF:4.000000,
+part_000.m4s
+#EXTINF:4.000000,
+part_001.m4s
+#EXTINF:4.000000,
+part_002.m4s
+#EXTINF:4.000000,
+part_003.m4s
+#EXTINF:4.000000,
+part_004.m4s
+#EXTINF:4.000000,
+part_005.m4s
+#EXTINF:4.000000,
+part_006.m4s
+#EXTINF:4.000000,
+part_007.m4s
+#EXTINF:4.000000,
+part_008.m4s
+#EXTINF:4.000000,
+part_009.m4s
+#EXTINF:4.000000,
+part_010.m4s
+#EXTINF:4.000000,
+part_011.m4s
+#EXTINF:4.000000,
+part_012.m4s
+#EXTINF:4.000000,
+part_013.m4s
+#EXTINF:4.000000,
+part_014.m4s
+#EXTINF:4.000000,
+part_015.m4s
+#EXTINF:4.000000,
+part_016.m4s
+#EXTINF:1.100000,
+part_017.m4s
+#EXT-X-ENDLIST