我已经尝试了一切，甚至包括我的敌人（ChatGPT）。我不确定我做错了什么。音频和视频将无法加载。最糟糕的是，我描述视频的文字应该改变颜色，但它没有这样做。我已经束手无策了，请帮忙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assignment 3</title>
<link rel="stylesheet" href="./styles/home.css" />
</head>
<body>
<div class="audioVisualContainer">
<!-- add lazy loaded audio or visual content here -->
<audio controls data-src="public/trimmed1.m4a"></audio><br><br>
<audio controls data-src="public/trimmed2.m4a"></audio><br><br>
<audio controls data-src="public/trimmed3.m4a"></audio>
</div>
<!-- checkboxes, DO NOT modify! -->
<div class="theDivs">
<input type="checkbox" />
<label> I agree to watch the video below.</label>
</div>
<div class="theDivs">
<input type="checkbox" />
<label>
I agree to only scroll down if I really want to watch the video.</label
>
</div>
<div class="theDivs">
<input type="checkbox" />
<label> I agree to respect the page author's views and opinion.</label>
</div>
<!-- add description and video here -->
<video width="920" height="720" controls data-src="content/Perfect Blue.mp4">
<source src="" type="video/mp4">
</video>
<br><br><p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Hic voluptates ratione tempore blanditiis quasi ducimus accusantium,
sed, sunt earum nam neque quam vel accusamus asperiores iure adipisci nisi facere. Tenetur?.
</p>
</body>
</html>
const lazyAudio = document.querySelectorAll('audio');
const lazyVid = document.getElementById('video');
const checkboxes = document.querySelectorAll('.theDivs');
const descriptVid = document.querySelector('.description');
const arrayCheck = () => Array.from(checkboxes).map(cb => cb.checked).reduce((a, b) => a && b, true);
const audioObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const audioPart = entry.target;
console.log('attempting to load');
if (audioPart.getAttribute("data-src") && !audioPart) {
audioPart.src = audioPart.getAttribute("data-src");
audioPart.load();
console.log('audio loaded');
}
observer.unobserve(audioPart);
}
});
}, { threshold: 0.1 });
const videoObserver = new IntersectionObserver(entries => {
entries.forEach((entry) => {
if (entry.isIntersecting && entry.intersectionRatio >= 0.33 && arrayCheck()) {
if (!lazyVid.src) {
lazyVid.src = lazyVid.dataset.src;
lazyVid.load();
}
lazyVid.play();
} else {
lazyVid.pause();
}
});
}, { threshold: 0.33 });
lazyVid.addEventListener("ended", () => {
videoObserver.unobserve(lazyVid);
})
const descriptionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio === 1) {
descriptVid.style.color = "purple";
observer.unobserve(descriptVid);
}
});
}, { threshold: 1.0 });
lazyAudio.forEach(lazyAudio => audioObserver.observe(lazyAudio));
videoObserver.observe(lazyVid);
descriptionObserver.observe(descriptVid);
它应该在 1 秒后加载每个音频，在视频位于视口 1/3 时加载视频，并在几秒钟后更改文本颜色。 （确实优先考虑的是音频和视频）。 我尝试了各种方法，比如也许我的路径是错误的，也许代码在某个地方有错误，但我找不到我做错了什么。我确实检查了网络选项卡，但考虑到路径是正确的，来源甚至没有出现，这很奇怪。
除了添加音频和视频的部分之外，我无法更改 HTML 文件的任何内容。
在视频标签中，src 属性中没有任何内容，而在音频标签中我认为您还需要添加
type=“audio/mp3”