From 9f4eb85ec9deeb37b605a7ac4b8bdd5beaac088b Mon Sep 17 00:00:00 2001 From: Gloria2tt Date: Tue, 31 Dec 2024 16:00:47 +0800 Subject: [PATCH] debug4 --- docs/index.html | 225 +++++++++++++++++++++++++++--------------------- 1 file changed, 125 insertions(+), 100 deletions(-) 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 @@ - Video Demo

AVSync Videos

-
-
- -
-
- -
-
- -
+
+ + +
-
- -
-
- -
-
- -
-
- -

VGGSound Videos

-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
+
-
Debug Information:
@@ -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); + } }); };