valentin.dupont/Insecam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hmmm

Browse Source
This commit is contained in:
Valentin DUPONT 2026-05-08 12:24:47 +00:00
commit 00251f3acf
4 changed files with 214 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
README.md Normal file
View File

Binary file not shown.

23
index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Les caméralalala</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="div">
<div class="div1" id="div1"></div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<div class="div4" id="div4"></div>
<div class="div5" id="div5"></div>
<div class="div6" id="div6"></div>
<div class="div7" id="div7"></div>
<div class="div8" id="div8"></div>
<div class="div9" id="div9"></div>
</div>
<script src="script.js"></script>
</body>
</html>

82
script.js Normal file
View File

@ -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);
});

109
styles.css Normal file
View File

@ -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;
}