diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index e952be7..7d6c217 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -141,6 +141,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay if (showPreview && videoRef.current && video.videoUrl.includes('.m3u8')) { const videoElement = videoRef.current; + // Ensure video element respects current mute state + videoElement.muted = isMuted; + if (Hls.isSupported()) { const hls = new Hls({ startLevel: 0, // Start with lowest quality @@ -153,24 +156,33 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay hlsRef.current = hls; hls.on(Hls.Events.MANIFEST_PARSED, () => { + // Set muted state before playing + videoElement.muted = isMuted; videoElement.play().catch(e => console.log('Preview autoplay failed:', e)); }); hls.on(Hls.Events.MEDIA_ATTACHED, () => { + // Set muted state after media is attached + videoElement.muted = isMuted; videoElement.addEventListener('loadedmetadata', () => { setDuration(videoElement.duration); + // Ensure muted state is preserved after metadata loads + videoElement.muted = isMuted; }); }); } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) { // Safari native HLS support videoElement.src = video.videoUrl; + videoElement.muted = isMuted; videoElement.addEventListener('loadedmetadata', () => { setDuration(videoElement.duration); + // Ensure muted state is preserved after metadata loads + videoElement.muted = isMuted; }); videoElement.play().catch(e => console.log('Preview autoplay failed:', e)); } } - }, [showPreview, video.videoUrl]); + }, [showPreview, video.videoUrl, isMuted]); return (