Update index.html

index.html

@@ -394,12 +394,18 @@
                 <button class="back-button" onclick="showVideoList()">← Back to Videos</button>
                 
                 <div class="video-player-section">
-                    <video id="videoPlayer" class="video-player" controls>
+                    <video id="videoPlayer" class="video-player" controls preload="metadata">
+                        <source id="videoSource" type="video/mp4">
+                        <source id="videoSourceWebm" type="video/webm">
+                        <source id="videoSourceOgg" type="video/ogg">
                         Your browser does not support the video tag.
+                        <p>If you're seeing this message, your browser doesn't support HTML5 video.</p>
+                        <p>Try downloading the video file directly or use a different browser.</p>
                     </video>
                     
                     <div class="video-details">
                         <h2 id="currentVideoTitle">Video Title</h2>
+                        <div id="videoInfo" style="color: #aaa; font-size: 0.9rem; margin-top: 0.5rem;"></div>
                     </div>
                 </div>
 
@@ -657,9 +663,62 @@
             document.getElementById('videoListContainer').style.display = 'none';
             document.getElementById('videoPlayerContainer').classList.add('active');
             
-            // Set up video player
+            // Set up video player with multiple source formats
             const videoPlayer = document.getElementById('videoPlayer');
-            videoPlayer.src = video.url;
+            const videoSource = document.getElementById('videoSource');
+            const videoSourceWebm = document.getElementById('videoSourceWebm');
+            const videoSourceOgg = document.getElementById('videoSourceOgg');
+            
+            // Clear previous sources
+            videoPlayer.removeAttribute('src');
+            videoSource.removeAttribute('src');
+            videoSourceWebm.removeAttribute('src');
+            videoSourceOgg.removeAttribute('src');
+            
+            // Set video info
+            const videoInfo = document.getElementById('videoInfo');
+            videoInfo.innerHTML = `
+                <p>Original URL: <a href="${video.url}" target="_blank" style="color: #ff6b6b;">${video.url}</a></p>
+                <p>Format: ${getFileExtension(video.url).toUpperCase()}</p>
+            `;
+            
+            // Detect file format and set appropriate source
+            const extension = getFileExtension(video.url).toLowerCase();
+            
+            if (extension === 'mkv') {
+                // MKV files might not work in browsers - show warning
+                videoInfo.innerHTML += `
+                    <div style="background: #ff6600; color: white; padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem;">
+                        <strong>⚠️ MKV Format Warning:</strong> MKV files may not play in web browsers. 
+                        Consider converting to MP4 format for better compatibility.
+                    </div>
+                `;
+                // Try anyway
+                videoSource.src = video.url;
+                videoSource.type = 'video/mp4'; // Sometimes MKV works with mp4 mime type
+            } else if (extension === 'mp4') {
+                videoSource.src = video.url;
+                videoSource.type = 'video/mp4';
+            } else if (extension === 'webm') {
+                videoSourceWebm.src = video.url;
+                videoSourceWebm.type = 'video/webm';
+            } else if (extension === 'ogg' || extension === 'ogv') {
+                videoSourceOgg.src = video.url;
+                videoSourceOgg.type = 'video/ogg';
+            } else {
+                // Unknown format - try as mp4
+                videoSource.src = video.url;
+                videoSource.type = 'video/mp4';
+                videoInfo.innerHTML += `
+                    <div style="background: #ff6600; color: white; padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem;">
+                        <strong>⚠️ Unknown Format:</strong> Attempting to play as MP4. 
+                        If playback fails, please convert to a web-compatible format.
+                    </div>
+                `;
+            }
+            
+            // Force reload the video element
+            videoPlayer.load();
             
             // Update video title
             document.getElementById('currentVideoTitle').textContent = video.title;
@@ -669,6 +728,18 @@
             
             // Scroll to top
             window.scrollTo({ top: 0, behavior: 'smooth' });
+            
+            // Add video event listeners for debugging
+            videoPlayer.addEventListener('loadstart', () => console.log('Video load started'));
+            videoPlayer.addEventListener('loadeddata', () => console.log('Video data loaded'));
+            videoPlayer.addEventListener('canplay', () => console.log('Video can start playing'));
+            videoPlayer.addEventListener('canplaythrough', () => console.log('Video can play through'));
+        }
+        
+        // Get file extension from URL
+        function getFileExtension(url) {
+            const pathname = new URL(url).pathname;
+            return pathname.split('.').pop() || '';
         }
 
         // Generate recommendations
@@ -719,12 +790,56 @@
         // Handle video errors
         function handleVideoError(event) {
             console.error('Video error:', event);
-            alert('Error loading video. Please check the video URL or try again later.');
+            const videoPlayer = document.getElementById('videoPlayer');
+            console.error('Video error details:', {
+                error: videoPlayer.error,
+                networkState: videoPlayer.networkState,
+                readyState: videoPlayer.readyState,
+                src: videoPlayer.src
+            });
+            
+            // Show detailed error message
+            const errorDiv = document.createElement('div');
+            errorDiv.style.cssText = `
+                background: #ff4444;
+                color: white;
+                padding: 1rem;
+                border-radius: 8px;
+                margin: 1rem 0;
+                text-align: center;
+            `;
+            errorDiv.innerHTML = `
+                <h3>Video Loading Error</h3>
+                <p>The video format may not be supported by your browser.</p>
+                <p><strong>Suggested solutions:</strong></p>
+                <ul style="text-align: left; margin: 0.5rem 0;">
+                    <li>Try converting MKV files to MP4 format</li>
+                    <li>Ensure video codecs are web-compatible (H.264/H.265)</li>
+                    <li>Check if the video URL is accessible</li>
+                    <li>Try opening the video URL directly in browser</li>
+                </ul>
+                <p style="font-size: 0.9rem; margin-top: 1rem;">
+                    Video URL: <a href="${videoPlayer.src}" target="_blank" style="color: #ffff99;">${videoPlayer.src}</a>
+                </p>
+            `;
+            
+            videoPlayer.parentNode.insertBefore(errorDiv, videoPlayer.nextSibling);
         }
 
         // Handle video loaded
         function handleVideoLoaded(event) {
             console.log('Video loaded successfully');
+            const videoPlayer = document.getElementById('videoPlayer');
+            console.log('Video metadata:', {
+                duration: videoPlayer.duration,
+                videoWidth: videoPlayer.videoWidth,
+                videoHeight: videoPlayer.videoHeight,
+                readyState: videoPlayer.readyState
+            });
+            
+            // Remove any previous error messages
+            const errorDivs = document.querySelectorAll('.video-player-section > div[style*="background: #ff4444"]');
+            errorDivs.forEach(div => div.remove());
         }
 
         // Utility function to escape HTML