Could someone possibly help me with some code for a video gallery? Unfortunately, I am way out of my depth here, I'm pa

A

Anonymous

Guest
Could someone possibly help me with some code for a video gallery?

Unfortunately, I am way out of my depth here, I'm passable at python, but html and the associated stuff is a mystery to me. I have the following code which works a treat provided all the files are in one folder, but the program I'm using saves everything in subfolders (which I cant change). The good thing about this is that it doesn't rely on any plugins / online java scripts etc... which is essential because there won't always be an internet connection. I have looked online and although I know what to do (a recursive search), I can't seem to adapt the code to work with this.

Any help would be brilliant, else I will be spending another night starring at the screen in vain.

Kind regards

Paul

Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple PHP Video Gallery</title>
    <link rel="stylesheet" type="text/css" href="2-theme.css">
    </head>
  <body>
    <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);

      // (B) OUTPUT ALL VIDEOS
      if (count($videos) > 0) { foreach ($videos as $vid) {
        printf("<video src='gallery/%s'>preload=auto</video>", rawurlencode(basename($vid)));
      }} 
    ?></div>

  <script>
   window.addEventListener("DOMContentLoaded", function(){
  for (let vid of document.querySelectorAll("#vid-gallery video")) {
    // (A) CLICK ON THUMBNAIL TO GO FULLSCREEN
    vid.addEventListener("click", function(){
      if (!this.fullscreenElement) {
        this.controls = true;
        this.requestFullscreen();
      }
    });
    
    // (B) EXIT FULLSCREEN MODE
    vid.addEventListener("fullscreenchange", function(){
      if (document.fullscreenElement == null) {
        this.controls = false;
        this.pause();
      }
    });
  }
});
  </script>
  </body>
</html>
 
As long as you're using a version of PHP newer than 5.3, you can use some built in iteration tools to do the following:

Code: 
$dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR;
$dirIterator = new RecursiveDirectoryIterator($dir);
$fileIterator = new RecursiveIteratorIterator($dirIterator);
$videos = new RegexIterator($fileIterator, '/\.(webm|mp4|ogg)$/');

$videos is now a "handle" that will recursively iterate through your videos folder and return files of your chosen types. You should be able to use foreach ($videos as $vid) as you are in your current code.
 
I can help you modify the code to make it work with subfolders. Here's an updated version of the code that includes a recursive search for video files within subfolders:
<!DOCTYPE html>
<html>
<head>
<title>Simple PHP Video Gallery</title>
<link rel="stylesheet" type="text/css" href="2-theme.css">
</head>
<body>
<div id="vid-gallery">
<?php
function scanVideos($dir) {
$videos = [];
$files = scandir($dir);

foreach ($files as $file) {
if ($file !== '.' && $file !== '..') {
$path = $dir . DIRECTORY_SEPARATOR . $file;
if (is_dir($path)) {
$videos = array_merge($videos, scanVideos($path));
} else {
$ext = pathinfo($path, PATHINFO_EXTENSION);
if (in_array($ext, ['webm', 'mp4', 'ogg'])) {
$videos[] = $path;
}
}
}
}

return $videos;
}

// (A) GET ALL VIDEO FILES FROM THE GALLERY FOLDER
$dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR;
$videos = scanVideos($dir);

// (B) OUTPUT ALL VIDEOS
if (count($videos) > 0) {
foreach ($videos as $vid) {
printf("<video src='%s' preload='auto'></video>", rawurlencode($vid));
}
}
?>
</div>

<script>
window.addEventListener("DOMContentLoaded", function() {
for (let vid of document.querySelectorAll("#vid-gallery video")) {
// (A) CLICK ON THUMBNAIL TO GO FULLSCREEN
vid.addEventListener("click", function() {
if (!this.fullscreenElement) {
this.controls = true;
this.requestFullscreen();
}
});

// (B) EXIT FULLSCREEN MODE
vid.addEventListener("fullscreenchange", function() {
if (document.fullscreenElement == null) {
this.controls = false;
this.pause();
}
});
}
});
</script>
</body>
</html>
In this updated code, the scanVideos() function is added to recursively search for video files within subfolders. It starts from the given directory ($dir) and iterates through each file and subfolder. If a file is a video file, it is added to the $videos array. If a subfolder is found, the function is called recursively to scan its contents.

Please make sure to replace the existing code in your HTML file with this modified version. Let me know if you have any further questions or issues!
 
You must log in or register to reply here.
Back
Top