diff --git a/docs/index.html b/docs/index.html
index 58316e2..fccd665 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,12 +1,11 @@
-
AVSync Videos
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
VGGSound Videos
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
@@ -158,33 +121,95 @@
VGGSound Videos
debugPanel.scrollTop = debugPanel.scrollHeight;
}
+ function clearDebug() {
+ const debugPanel = document.getElementById('debug-panel');
+ debugPanel.innerHTML = '
Debug Information:
';
+ }
+
+ function handleVideoLoaded(video) {
+ const source = video.querySelector('source');
+ addDebugMessage(`Video loaded successfully: ${source.src}`);
+ updateVideoInfo(video);
+ }
+
+ function handleMetadata(video) {
+ updateVideoInfo(video);
+ }
+
+ function updateVideoInfo(video) {
+ const infoDiv = video.nextElementSibling;
+ infoDiv.innerHTML = `
+ Duration: ${video.duration.toFixed(2)}s
+ Size: ${video.videoWidth}x${video.videoHeight}
+ Ready State: ${video.readyState}
+ `;
+ }
+
function handleVideoError(video) {
- const sourceElement = video.querySelector('source');
- const videoPath = sourceElement ? sourceElement.src : video.src;
- console.error('Error loading video:', videoPath);
- addDebugMessage(`Error loading video: ${videoPath}`);
- const errorMessage = document.createElement('p');
- errorMessage.className = 'error';
- errorMessage.textContent = 'Video loading failed. Please check the console for details.';
- video.parentElement.appendChild(errorMessage);
+ const source = video.querySelector('source');
+ const errorMessage = video.error ? `Error: ${video.error.message}` : 'Unknown error';
+ addDebugMessage(`Failed to load video: ${source.src}\n${errorMessage}`);
+
+ // Try alternative video format
+ if (source.src.endsWith('.mp4')) {
+ const webmSource = source.src.replace('.mp4', '.webm');
+ addDebugMessage(`Trying WebM format: ${webmSource}`);
+ source.src = webmSource;
+ video.load();
+ }
+ }
+
+ function testVideoLoading() {
+ const videos = document.querySelectorAll('video');
+ videos.forEach((video, index) => {
+ const source = video.querySelector('source');
+ fetch(source.src, { method: 'HEAD' })
+ .then(response => {
+ if (response.ok) {
+ addDebugMessage(`Video ${index + 1} accessible: ${source.src}`);
+ addDebugMessage(`Content-Type: ${response.headers.get('content-type')}`);
+ addDebugMessage(`Content-Length: ${response.headers.get('content-length')}`);
+ } else {
+ addDebugMessage(`Video ${index + 1} not accessible: ${response.status} ${response.statusText}`);
+ }
+ })
+ .catch(error => {
+ addDebugMessage(`Error checking video ${index + 1}: ${error.message}`);
+ });
+ });
+ }
+
+ function checkVideoFormats() {
+ const video = document.createElement('video');
+ const formats = {
+ mp4: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+ webm: 'video/webm; codecs="vp8, vorbis"',
+ ogg: 'video/ogg; codecs="theora, vorbis"'
+ };
+
+ addDebugMessage('Checking supported video formats:');
+ for (let format in formats) {
+ addDebugMessage(`${format}: ${video.canPlayType(formats[format]) || 'not supported'}`);
+ }
}
window.onload = function() {
- addDebugMessage('Page loaded. Checking video paths...');
- document.querySelectorAll('video source').forEach((source, index) => {
- const absolutePath = new URL(source.src, window.location.href).href;
- addDebugMessage(`Video ${index + 1}:`);
- addDebugMessage(`- Relative path: ${source.src}`);
- addDebugMessage(`- Absolute path: ${absolutePath}`);
+ addDebugMessage('Page loaded. Checking video support...');
+ checkVideoFormats();
+
+ const videos = document.querySelectorAll('video');
+ videos.forEach((video, index) => {
+ const source = video.querySelector('source');
+ addDebugMessage(`Initializing video ${index + 1}: ${source.src}`);
- source.parentElement.addEventListener('error', (e) => {
- const errorMessage = e.target.error ? e.target.error.message : 'Unknown error';
- addDebugMessage(`Error loading video ${index + 1}: ${errorMessage}`);
- });
+ // Add volume for testing
+ video.volume = 0.5;
- source.parentElement.addEventListener('loadeddata', () => {
- addDebugMessage(`Video ${index + 1} loaded successfully`);
- });
+ // Check if video is actually loading
+ if (video.readyState > 0) {
+ addDebugMessage(`Video ${index + 1} metadata already loaded`);
+ updateVideoInfo(video);
+ }
});
};