ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix video autoplay on page load — trigger play on MANIFEST_PARSED

Browse Source 
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>
This commit is contained in:
ghassan 2026-05-16 13:58:24 +03:00
parent 4f275de15f
commit e74862a24d
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
resources/views/components/video-player.blade.php
View File

@ -808,34 +808,55 @@ function getShuffledPrevUrl() {
window._ytpHls = null; window._ytpHls = null;
function tryAutoplay() {
video.muted = true;
video.autoplay = true;
video.play().catch(function(){});
}
function initSource() { function initSource() {
video.muted = true;
video.autoplay = true;
if (HLS_URL && window.Hls && Hls.isSupported()) { if (HLS_URL && window.Hls && Hls.isSupported()) {
window._ytpHls = new Hls({ startLevel: -1 }); window._ytpHls = new Hls({ startLevel: -1 });
window._ytpHls.loadSource(HLS_URL); window._ytpHls.loadSource(HLS_URL);
window._ytpHls.attachMedia(video); window._ytpHls.attachMedia(video);
window._ytpHls.once(Hls.Events.MANIFEST_PARSED, tryAutoplay);
} else if (HLS_URL && video.canPlayType('application/vnd.apple.mpegurl')) { } else if (HLS_URL && video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = HLS_URL; video.src = HLS_URL;
video.load();
video.play().catch(function(){});
} else { } else {
video.src = MP4_URL; video.src = MP4_URL;
video.load();
video.play().catch(function(){});
} }
} }
// Reinitialize source after SPA transition — called by playlist overlay scripts // Reinitialize source after SPA transition — called by playlist overlay scripts
window._ytpLoadSource = function(hlsUrl, mp4Url) { window._ytpLoadSource = function(hlsUrl, mp4Url) {
if (window._ytpHls) { window._ytpHls.destroy(); window._ytpHls = null; } if (window._ytpHls) { window._ytpHls.destroy(); window._ytpHls = null; }
video.muted = true;
video.autoplay = true;
if (hlsUrl && window.Hls && Hls.isSupported()) { if (hlsUrl && window.Hls && Hls.isSupported()) {
window._ytpHls = new Hls({ startLevel: -1 }); window._ytpHls = new Hls({ startLevel: -1 });
window._ytpHls.loadSource(hlsUrl); window._ytpHls.loadSource(hlsUrl);
window._ytpHls.attachMedia(video); 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')) { } else if (hlsUrl && video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hlsUrl; video.src = hlsUrl;
video.load(); video.load();
video.muted = false;
video.play().catch(function(){});
} else { } else {
video.src = mp4Url; video.src = mp4Url;
video.load(); video.load();
}
video.muted = false; video.muted = false;
video.play().catch(function(){}); video.play().catch(function(){});
}
}; };
// Load HLS.js from CDN then init // Load HLS.js from CDN then init