Initial Commit

resources/js/components/dredge/Feed/PostCard.vue

@@ -82,6 +82,8 @@ usePauseOffscreen(videoRefs);
                         :aria-label="slide.alt"
                         :ref="registerVideo"
                         controls
+                        autoplay
+                        muted
                         preload="metadata"
                         playsinline
                         class="card__video"
@@ -95,6 +97,7 @@ usePauseOffscreen(videoRefs);
                         contain
                         height="100%"
                         width="100%"
+                        eager
                     >
                         <template #placeholder>
                             <div class="card__scan" />
@@ -121,6 +124,8 @@ usePauseOffscreen(videoRefs);
                 :ref="registerVideo"
                 :poster="post.image_url ?? undefined"
                 controls
+                autoplay
+                muted
                 preload="metadata"
                 playsinline
                 class="card__video"

resources/js/composables/usePauseOffScreen.ts

@@ -11,12 +11,21 @@ export function usePauseOffscreen(
             (entries) => {
                 for (const entry of entries) {
                     const video = entry.target as HTMLVideoElement;
-                    if (!entry.isIntersecting && !video.paused) {
+                    if (entry.isIntersecting) {
+                        // Play whenever a video becomes visible — covers both
+                        // scrolling a post into view and navigating to a new
+                        // carousel slide (autoplay only fires once, on initial
+                        // mount, so it can't handle the latter on its own).
+                        video.play().catch(() => {
+                            // Autoplay can still be blocked by the browser;
+                            // leave it paused and let the user hit play.
+                        });
+                    } else if (!video.paused) {
                         video.pause();
                     }
                 }
             },
-            { threshold: 0.25 }, // pause once less than 25% of the video is visible
+            { threshold: 0.25 }, // play/pause around the 25% visible mark
         );
 
         const els = Array.isArray(videoRef.value)