From 00251f3acf0f18a3efd9fcc77a00d74256cf0de3 Mon Sep 17 00:00:00 2001 From: Valentin DUPONT Date: Fri, 8 May 2026 12:24:47 +0000 Subject: [PATCH] hmmm --- README.md | Bin 0 -> 1024 bytes index.html | 23 +++++++++++ script.js | 82 ++++++++++++++++++++++++++++++++++++++++ styles.css | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 214 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..06d7405020018ddf3cacee90fd4af10487da3d20 GIT binary patch literal 1024 ScmZQz7zLvtFd70QH3R?z00031 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..9dd29d6 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + Les caméralalala + + + +
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..785957e --- /dev/null +++ b/script.js @@ -0,0 +1,82 @@ +console.log("^^"); + +//Tableau de vidéos +const videos = [ + "./VID/vid01.mp4", + "./VID/vid02.mp4", + "./VID/vid03.mp4", + "./VID/vid04.mp4", + "./VID/vid05.mp4", + "./VID/vid06.mp4", + "./VID/vid07.mp4", + "./VID/vid09.mp4", + "./VID/vid09.mp4", + "./VID/vid10.mp4", + "./VID/vid11.mp4", + "./VID/vid12.mp4", + "./VID/vid13.mp4", + "./VID/vid14.mp4", + "./VID/vid15.mp4", + "./VID/vid16.mp4", + "./VID/vid17.mp4", + "./VID/vid18.mp4", + "./VID/vid19.mp4", + ]; +//console.log("vidéos", videos); + +//prend mes divs +const videocontainer = [ + document.getElementById("div1"), + document.getElementById("div2"), + document.getElementById("div3"), + document.getElementById("div4"), + document.getElementById("div5"), + document.getElementById("div6"), + document.getElementById("div7"), + document.getElementById("div8"), + document.getElementById("div9"), +]; + +//Prendre une vidéo aléaoire +function getRandomVideo(videosArray) { + const randomIndex = Math.floor(Math.random() * videosArray.length); //Random fois la taille du tableau + return videosArray[randomIndex]; +} + +//fonction pour calcul delay +function getRandomDelay(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; //nombre random entre le min et le max +} + +//fonction delay +function changeVideoAfterDelay(container) { + // Génère un délai aléatoire (ex: entre 5 et 1min) + const delay = getRandomDelay(5000, 60000); //défini le min et le max + + //En gros recharche la vidéo tout les x delay + setTimeout(() => { + const videoElement = container.querySelector("video"); + if (videoElement) { + videoElement.src = getRandomVideo(videos); + videoElement.load(); // Recharge la vidéo + } + // Relance le processus pour cette div + changeVideoAfterDelay(container); + }, delay); +} + +// Pour chaque div, ajouter une vidéo aléatoire +videocontainer.forEach(container => { + const videoElement = document.createElement("video"); //videoElement = créer un élément vidéo + videoElement.src = getRandomVideo(videos); //ici applique la source de la vidéo = une vidéo aléatoire du tableau vid + videoElement.autoplay = true; // Lecture automatique + videoElement.muted = true; // Désactive le son + videoElement.loop = true; // Boucle la vidéo + videoElement.style.width = "100%" + videoElement.style.height = "100%" + videoElement.style.objectFit = "cover" + container.appendChild(videoElement); + + //lance la fonction pour changer de video + changeVideoAfterDelay(container); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ee91a92 --- /dev/null +++ b/styles.css @@ -0,0 +1,109 @@ +body { + margin: 0%; + padding: 0; + height: 100vh; + width: 100vw; + overflow: hidden; + background-color: black; +} + +.div { + margin-top: 2%; + margin-right: 5%; + margin-left: 5%; + margin-bottom: 2%; + height: 100%; + width: 100%; + position: relative; + +} + +.div1 { + top: 0; + left: 0; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div2 { + top: 0%; + left: 31%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div3 { + top: 0%; + left: 62%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div4 { + top: 31%; + left: 0%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div5 { + top: 31%; + left: 31%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div6 { + top: 31%; + left: 62%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div7 { + top: 62%; + left: 0%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div8 { + top: 62%; + left: 31%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} + +.div9 { + top: 62%; + left: 62%; + height: 30%; + width: 30%; + display: flex; + position: absolute; + overflow: hidden; +} \ No newline at end of file