I am making php gallery. There is a gallery folder in which videos are stored. The videos are displayed on the page but I want name of the video to be displayed under the video itself. I tried by combining code from websites but the result isn't successful. Please Help. Thanks in advance.
My code:
Gallery.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; }
}
and 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();
}
};
}
});
The name of my video folder is gallery.
Result: Problematic Pic
In short: My problem is how to display each video's title (name) under it.
Thanks to @ADyson and Google, I figured it out.
Just replace the php code:
<?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>";
}}
?>
The main problem was the 2nd for each loop. It will display each video's name (without extension and path).