Outdoor Digital com Vídeos 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Outdoor Digital com Vídeos</title>
  <style>
    body {
      margin: 0;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #outdoor {
      position: relative;
      width: 640px;
      height: 360px;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
      opacity: 0;
    }

    .slide.active {
      z-index: 1;
      opacity: 1;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: grid;
      grid-template-columns: repeat(20, 1fr);
      z-index: 2;
      pointer-events: none;
    }

    .stripe {
      background: #000;
      opacity: 1;
      transform: translateY(0);
      animation: persianaFechando 1s forwards;
    }

    .slide.active .stripe {
      animation: persianaAbrindo 1s forwards;
    }

    @keyframes persianaAbrindo {
      to {
        transform: translateY(-100%);
        opacity: 0;
      }
    }

    @keyframes persianaFechando {
      from {
        transform: translateY(100%);
        opacity: 1;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div id="outdoor"></div>

  <script>
    const videoUrls = [
      "https://louvores2025.com/wp-content/uploads/2025/05/SLIDE-02-converted.mp4",
      "https://louvores2025.com/wp-content/uploads/2025/05/SLIDE-CANECAS-converted.mp4",
      "https://louvores2025.com/wp-content/uploads/2025/05/SLIDE-02-converted.mp4",
      "https://louvores2025.com/wp-content/uploads/2025/05/SLIDE-CANECAS-converted.mp4"
    ];

    const outdoor = document.getElementById("outdoor");

    const slides = videoUrls.map(url => {
      const slide = document.createElement("div");
      slide.className = "slide";

      const video = document.createElement("video");
      video.src = url;
      video.muted = true;
      video.loop = true;
      video.preload = "auto"; // carrega antes
      slide.appendChild(video);

      // Máscara
      const mask = document.createElement("div");
      mask.className = "mask";

      for (let i = 0; i < 20; i++) {
        const stripe = document.createElement("div");
        stripe.className = "stripe";
        stripe.style.animationDelay = `${i * 0.05}s`;
        mask.appendChild(stripe);
      }

      slide.appendChild(mask);
      outdoor.appendChild(slide);
      return { slide, video };
    });

    let current = 0;
    slides[current].slide.classList.add("active");
    slides[current].video.play();

    setInterval(() => {
      slides[current].slide.classList.remove("active");
      slides[current].video.pause();
      slides[current].video.currentTime = 0; // volta ao início para a próxima vez

      current = (current + 1) % slides.length;

      slides[current].slide.classList.add("active");
      slides[current].video.play();
    }, 7000); // troca a cada 7 segundos
  </script>
</body>
</html>