Test offline page

pages/live.html

@@ -6,45 +6,62 @@ permalink: /live.html
 <script src="/assets/js/dash.all.min.js"></script>
 
 
-	<div>
-			<video
-                class="player"
-                data-dashjs-player
-                autoplay
-                controls
-                muted 
-            />
-            
-            <div class="player-off">
-                <h1>Offline</h1>
-            </div>
+<div class="player-container">
+    <video
+        class="player"
+        data-dashjs-player
+        autoplay
+        controls
+        muted 
+    ></video>
+    
+    <div class="player-off">
+        <h1>Offline</h1>
+    </div>
+</div>
 
-	</div>
-	
 <style>
+    .player-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
 
-	video {
-	/* width: 100%; */
-	/* border: 2px solid #ccc; */
-		border-radius: 15px;
-	}
+    .player {
+        width: 100%;
+        height: 100%;
+        border-radius: 15px;
+    }
 
-	video::-webkit-media-controls {
-	background-color: hsl(0, 0%, 14%);
-	}
+    .player-off {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.6); /* Cor de fundo semitransparente */
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 15px;
+        z-index: 10; /* Garante que a mensagem "Offline" apareça em cima do vídeo */
+        
+    }
 
-	video::-webkit-media-controls-play-button {
-	color: #fff;
-	}
-	.player{
-		width: 100%;
-		height: 100%;
-		/* background-color: aqua; */
-	}
-	.player-info{
-		border-radius: 15px;
-		background-color: #0b1a33;
-	}
+    .player-info {
+        border-radius: 15px;
+        background-color: #0b1a33;
+    }
+
+    /* Estilos específicos para o player, se necessário */
+    video::-webkit-media-controls {
+        background-color: hsl(0, 0%, 14%);
+    }
+
+    video::-webkit-media-controls-play-button {
+        color: #fff;
+    }
 </style>
 
 
@@ -61,6 +78,7 @@ permalink: /live.html
       // Exemplo de como usar o valor
       console.log(user); // Isso vai exibir o valor do parâmetro 'user'
       const videoElement = document.querySelector('video');
+      const playerOffElement = document.querySelector('.player-off');
       const url = `https://cast.alice.ufsj.edu.br/dash/${user}.mpd`;
       videoElement.src = url;
 
@@ -70,16 +88,14 @@ permalink: /live.html
         .then(response => {
             if (response.ok) {
                 console.log("Arquivo existe.");
-               
+                playerOffElement.style.display = "none";
+
+                
             } else {
                 console.log("Arquivo não encontrado.");
                 // Coloque o código para ocultar o vídeo aqui
                 videoElement.style.display = "none";
+                
             }
         })
-        .catch(error => {
-            console.error("Erro ao verificar o arquivo:", error);
-            // Coloque o código para ocultar o vídeo aqui
-            videoElement.style.display = "none";
-        });
 </script>