hans
/
VFX2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update videos array to be dynamic

master
HxxxxxS 2 years ago
parent
a5c26cf336
commit
e37525514c
2 changed files with 32 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      index.html
  2. 40
      script.js

5
index.html
Unescape View File

@ -7,11 +7,6 @@
</head> </head>
<body> <body>
<div id="visualizer"> <div id="visualizer">
<div class="video-layer">
</div>
<div class="video-layer">
</div>
<canvas id="videoCanvas"></canvas> <canvas id="videoCanvas"></canvas>

40
script.js
Unescape View File

@ -4,16 +4,32 @@ let debugMode = true;
const canvas = document.getElementById("videoCanvas"); const canvas = document.getElementById("videoCanvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const videos = [createVideoElement(), createVideoElement()]; let videosToLoad = 2
const maxVideosToLoad = 9
const videos = [];
let videosLoaded = 0; let videosLoaded = 0;
let aspectRatio = 1; let aspectRatio = 1;
window.addEventListener("DOMContentLoaded", () => { function loadVideos(num) {
let previousVideo console.log(`Loading ${num} videos`)
videos.forEach((video) => { while (num > 0) {
previousVideo = selectRandomVideo(previousVideo || video) 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) => { videos.forEach((video) => {
video.addEventListener("loadedmetadata", handleVideoLoaded); video.addEventListener("loadedmetadata", handleVideoLoaded);
@ -162,10 +178,18 @@ function selectRandomVideo(videoElement) {
}); });
} }
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function(event) {
console.log('keyDown',event)
// Check if the pressed key is the one you want to bind // 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 debugMode = !debugMode
console.log("debugMode:",debugMode) console.log("debugMode:",debugMode)
} }
if (event.key === 'ArrowDown') {
loadVideos(-1)
}
if (event.key === 'ArrowUp') {
loadVideos(1)
}
}); });
Write Preview
Loading…
Cancel
Save