I’ve tried everything, even my enemy (ChatGPT). I’m not sure what I’m doing wrong. The audios and video will not load. Worst off, my text describing the video is supposed to change colours and its not doing it. Im at the end of my rope here, please help.
<!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);
It should load each audio after 1 second, load the video when it is in the viewport 1/3 and change the text color after a few seconds. (Really the priority is the audio and video).
I tried various things, like maybe my path was wrong, maybe the code has an error somewhere and i couldnt find what I’m doing wrong. I did check the network tab and the sources dont even appear which is odd, considering the path is right.
I cannot change anything the HTML file besides the sections where audios and videos are added.