Estoy haciendo galería php. Hay una carpeta de galería en la que se almacenan los videos. Los videos se muestran en la página, pero quiero que el nombre del video se muestre debajo del video mismo. Intenté combinar código de sitios web pero el resultado no fue exitoso. Por favor ayuda. Gracias por adelantado.
Mi código:
Galería.php:
<!DOCTYPE html> <html> <head> <title>Simple PHP Video Gallery</title> <link rel="stylesheet" type="text/css" href="2-theme.css"> <script src="3-gallery.js"></script> </head> <body> <h1>h</h1> <div id="vid-gallery"><?php // (A) GET ALL VIDEO FILES FROM THE GALLERY FOLDER $dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR; $videos = glob("$dir*.{webm,mp4,ogg}", GLOB_BRACE); $alt = glob("$dir*.{webm,mp4,ogg}", GLOB_BRACE); // (B) OUTPUT ALL VIDEOS if (count($videos) > 0) { foreach ($videos as $vid) { printf("<video src='gallery/%s'></video>", rawurlencode(basename($vid))); //I added this one from another website in code: $fileList = glob('gallery/*'); foreach($fileList as $filename){ if(is_file($filename)){ echo("<h1>$filename;</h1>"),'<br>'; } } }} ?> </div> </body> </html>CSS:
/* (A) GALLERY - BIG SCREEN */ #vid-gallery { display: grid; grid-template-columns: repeat(3, auto); grid-gap: 10px; } #vid-gallery video { width: 100%; cursor: pointer; } /* (B) GALLERY - SMALL SCREEN */ @media screen and (max-width: 1000px) { #vid-gallery { grid-template-columns: repeat(2, auto); } } @media screen and (max-width: 600px) { #vid-gallery { grid-template-columns: auto; } }y js:
window.addEventListener("DOMContentLoaded", () => { for (let vid of document.querySelectorAll("#vid-gallery video")) { // (A) CLICK ON THUMBNAIL TO GO FULLSCREEN vid.onclick = () => { if (!vid.fullscreenElement) { vid.controls = true; vid.requestFullscreen(); } }; // (B) EXIT FULLSCREEN MODE vid.onfullscreenchange = () => { if (document.fullscreenElement == null) { vid.controls = false; vid.pause(); } }; } });El nombre de mi carpeta de videos es galería.
Resultado: Imagen Problemática
En resumen: mi problema es cómo mostrar el título (nombre) de cada video debajo de él.
Gracias a @ADyson y Google, lo descubrí. Simplemente reemplace el código php :
<?php $exten = '.mp4'; $dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR; $videos = glob("$dir*.{mp4}", GLOB_BRACE); $alt = glob("$dir*.{webm,mp4,ogg}", GLOB_BRACE); if (count($videos) > 0) { foreach ($videos as $vid) { printf("<video src='gallery/%s'></video>", rawurlencode(basename($vid))); echo "<h1>".basename($vid,$exten)."</h1>"; }} ?>El principal problema fue el segundo para cada bucle. Mostrará el nombre de cada video (sin extensión ni ruta).