Update index.html

index.html

@@ -394,18 +394,12 @@
                 <button class="back-button" onclick="showVideoList()">← Back to Videos</button>
                 
                 <div class="video-player-section">
-                    <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">
+                    <video id="videoPlayer" class="video-player" controls>
                         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>
 
@@ -663,62 +657,9 @@
             document.getElementById('videoListContainer').style.display = 'none';
             document.getElementById('videoPlayerContainer').classList.add('active');
             
-            // Set up video player with multiple source formats
+            // Set up video player
             const videoPlayer = document.getElementById('videoPlayer');
-            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();
+            videoPlayer.src = video.url;
             
             // Update video title
             document.getElementById('currentVideoTitle').textContent = video.title;
@@ -728,18 +669,6 @@
             
             // 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
@@ -790,56 +719,12 @@
         // Handle video errors
         function handleVideoError(event) {
             console.error('Video error:', event);
-            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);
+            alert('Error loading video. Please check the video URL or try again later.');
         }
 
         // 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