From e74862a24db3f63cbf7640582893e3a91d0f5031 Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Sat, 16 May 2026 13:58:24 +0300
Subject: [PATCH] =?UTF-8?q?Fix=20video=20autoplay=20on=20page=20load=20?=
 =?UTF-8?q?=E2=80=94=20trigger=20play=20on=20MANIFEST=5FPARSED?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, play() was only called from the canplay listener which can
fire too late or be missed with HLS.js. Now also triggers on
Hls.Events.MANIFEST_PARSED (the earliest reliable point), and calls
play() directly after video.load() for MP4/native-HLS paths. Also
fixes _ytpLoadSource (SPA transitions) to use the same pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../views/components/video-player.blade.php   | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/video-player.blade.php b/resources/views/components/video-player.blade.php
index ecf6d0d..048277f 100644
--- a/resources/views/components/video-player.blade.php
+++ b/resources/views/components/video-player.blade.php
@@ -808,34 +808,55 @@ function getShuffledPrevUrl() {
 
 window._ytpHls = null;
 
+function tryAutoplay() {
+    video.muted    = true;
+    video.autoplay = true;
+    video.play().catch(function(){});
+}
+
 function initSource() {
+    video.muted    = true;
+    video.autoplay = true;
     if (HLS_URL && window.Hls && Hls.isSupported()) {
         window._ytpHls = new Hls({ startLevel: -1 });
         window._ytpHls.loadSource(HLS_URL);
         window._ytpHls.attachMedia(video);
+        window._ytpHls.once(Hls.Events.MANIFEST_PARSED, tryAutoplay);
     } else if (HLS_URL && video.canPlayType('application/vnd.apple.mpegurl')) {
         video.src = HLS_URL;
+        video.load();
+        video.play().catch(function(){});
     } else {
         video.src = MP4_URL;
+        video.load();
+        video.play().catch(function(){});
     }
 }
 
 // Reinitialize source after SPA transition — called by playlist overlay scripts
 window._ytpLoadSource = function(hlsUrl, mp4Url) {
     if (window._ytpHls) { window._ytpHls.destroy(); window._ytpHls = null; }
+    video.muted    = true;
+    video.autoplay = true;
     if (hlsUrl && window.Hls && Hls.isSupported()) {
         window._ytpHls = new Hls({ startLevel: -1 });
         window._ytpHls.loadSource(hlsUrl);
         window._ytpHls.attachMedia(video);
+        window._ytpHls.once(Hls.Events.MANIFEST_PARSED, function() {
+            video.muted = false;
+            video.play().catch(function(){});
+        });
     } else if (hlsUrl && video.canPlayType('application/vnd.apple.mpegurl')) {
         video.src = hlsUrl;
         video.load();
+        video.muted = false;
+        video.play().catch(function(){});
     } else {
         video.src = mp4Url;
         video.load();
+        video.muted = false;
+        video.play().catch(function(){});
     }
-    video.muted = false;
-    video.play().catch(function(){});
 };
 
 // Load HLS.js from CDN then init