-
-
-
-
-
diff --git a/script.js b/script.js
index 0624e20..4f39812 100644
--- a/script.js
+++ b/script.js
@@ -4,16 +4,32 @@ let debugMode = true;
const canvas = document.getElementById("videoCanvas");
const ctx = canvas.getContext("2d");
-const videos = [createVideoElement(), createVideoElement()];
+let videosToLoad = 2
+const maxVideosToLoad = 9
+const videos = [];
let videosLoaded = 0;
let aspectRatio = 1;
-window.addEventListener("DOMContentLoaded", () => {
- let previousVideo
- videos.forEach((video) => {
- previousVideo = selectRandomVideo(previousVideo || video)
- });
-})
+function loadVideos(num) {
+ console.log(`Loading ${num} videos`)
+ while (num > 0) {
+ let video = createVideoElement()
+ video.addEventListener("loadedmetadata", handleVideoLoaded);
+ video.addEventListener("loaded", handleVideoEnded);
+ video.addEventListener("ended", handleVideoEnded);
+ video.src = selectRandomVideo(video)
+ videos.push(video)
+ num--
+ }
+ while (num < 0) {
+ let video = videos.pop()
+ video.removeEventListener("loadedmetadata", handleVideoLoaded);
+ video.removeEventListener("ended", handleVideoEnded);
+ num++
+ }
+}
+
+loadVideos(videosToLoad)
videos.forEach((video) => {
video.addEventListener("loadedmetadata", handleVideoLoaded);
@@ -162,10 +178,18 @@ function selectRandomVideo(videoElement) {
});
}
+
document.addEventListener('keydown', function(event) {
+ console.log('keyDown',event)
// Check if the pressed key is the one you want to bind
- if (event.key === 'Enter') { // Change 'Enter' to the desired key
+ if (event.key === 'Enter') {
debugMode = !debugMode
console.log("debugMode:",debugMode)
}
+ if (event.key === 'ArrowDown') {
+ loadVideos(-1)
+ }
+ if (event.key === 'ArrowUp') {
+ loadVideos(1)
+ }
});
\ No newline at end of file