Skip to content

Commit

Permalink
debug4
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gloria2tt
Gloria2tt committed Dec 31, 2024
1 parent c9da4fc commit 9f4eb85
Showing 1 changed file with 125 additions and 100 deletions.
225 changes: 125 additions & 100 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<!-- head 部分相同 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Demo</title>
<style>
/* 保持原有样式不变 */
/* 保持原有样式 */
.container {
max-width: 1200px;
margin: 0 auto;
Expand All @@ -16,15 +15,18 @@
display: flex;
justify-content: space-between;
margin-bottom: 30px;
flex-wrap: wrap;
}
.video-container {
width: 32%;
position: relative;
margin-bottom: 20px;
}
video {
width: 100%;
height: auto;
border-radius: 8px;
background: #f0f0f0;
}
h2 {
margin: 40px 0 20px;
Expand All @@ -42,9 +44,11 @@
font-family: monospace;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
}
.debug-message {
margin: 5px 0;
font-size: 12px;
}
.error {
color: #ff4444;
Expand All @@ -53,97 +57,56 @@
border-radius: 4px;
margin: 5px 0;
}
.video-info {
font-size: 12px;
margin-top: 5px;
color: #666;
}
.fallback {
padding: 20px;
background: #f8f8f8;
border-radius: 8px;
text-align: center;
margin-top: 10px;
}
.test-btn {
margin-top: 10px;
padding: 5px 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.test-btn:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>AVSync Videos</h2>
<div class="video-row">
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/avsync/video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/avsync/video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/avsync/video3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="test-controls" style="text-align: center; margin-bottom: 20px;">
<button onclick="testVideoLoading()" class="test-btn">Test Video Loading</button>
<button onclick="checkVideoFormats()" class="test-btn">Check Video Formats</button>
<button onclick="clearDebug()" class="test-btn">Clear Debug Log</button>
</div>
<!-- 其他 AVSync 视频，路径同样修改 -->
<div class="video-row">
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/avsync/video4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/avsync/video5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/avsync/video6.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>

<h2>VGGSound Videos</h2>
<div class="video-row">
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/vggsound/video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/vggsound/video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/vggsound/video3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="video-row">
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/vggsound/video4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/vggsound/video5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<video controls onError="handleVideoError(this)">
<source src="/anonymize-demo/assets/vggsound/video6.mp4" type="video/mp4">
<video controls
onloadeddata="handleVideoLoaded(this)"
onloadedmetadata="handleMetadata(this)"
onerror="handleVideoError(this)"
preload="metadata">
<source src="/anonymize-demo/assets/avsync/video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="video-info"></div>
</div>
<!-- Repeat for other videos with the same event handlers -->
</div>
</div>

<!-- Debug Panel -->
<div id="debug-panel" class="debug-panel">
<div class="debug-message">Debug Information:</div>
</div>
Expand All @@ -158,33 +121,95 @@ <h2>VGGSound Videos</h2>
debugPanel.scrollTop = debugPanel.scrollHeight;
}

function clearDebug() {
const debugPanel = document.getElementById('debug-panel');
debugPanel.innerHTML = '<div class="debug-message">Debug Information:</div>';
}

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<br>
Size: ${video.videoWidth}x${video.videoHeight}<br>
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);
}
});
};
</script>
Expand Down

0 comments on commit 9f4eb85

Please sign in to comment.