如何自动将网站主机目录下所有视频嵌入网页并适配新增视频？

Absolutely, there are several straightforward ways to automate embedding all videos in a directory and have new ones show up automatically—no more manual link-clicking or page edits! Let’s break down the most practical solutions based on your setup:

1. Server-Side Backend Script (Best for Dynamic Sites) #

If your web host supports backend languages like PHP, Python, or Node.js, this is the most reliable approach. The script will scan your video directory on the fly and generate embedded video elements automatically.

Example with PHP: #

Save this as video-gallery.php in your website’s root folder, and create a videos/ directory to store your video files:

<?php
// Define your video directory path (relative to this script)
$videoDir = './videos/';
// List of supported video extensions
$allowedExtensions = ['mp4', 'webm', 'ogg'];

// Get all items in the directory
$directoryItems = scandir($videoDir);

// Start building the gallery HTML
echo '<div class="video-gallery">';
foreach ($directoryItems as $item) {
    // Skip directories and non-video files
    $fileExtension = strtolower(pathinfo($item, PATHINFO_EXTENSION));
    if (is_dir($videoDir . $item) || !in_array($fileExtension, $allowedExtensions)) {
        continue;
    }

    $videoUrl = $videoDir . $item;
    $videoTitle = pathinfo($item, PATHINFO_FILENAME);

    // Output the video embed
    echo <<<HTML
    <div class="video-card">
        <h3>$videoTitle</h3>
        <video controls width="100%">
            <source src="$videoUrl" type="video/$fileExtension">
            Sorry, your browser doesn't support HTML5 video playback.
        </video>
    </div>
HTML;
}
echo '</div>';
?>

How it works:

• Upload new videos directly to the videos/ directory, and they’ll appear automatically when you refresh video-gallery.php.
• Ensure your web server has read permissions for the videos/ folder.
• Add CSS styling (see below) to make the gallery look clean.

2. Static Site Generator (SSG) for Static Sites #

If you’re using a static site (e.g., Jekyll, Hugo, Eleventy), you can leverage the SSG’s built-in file reading capabilities to generate a static video gallery that updates when you rebuild your site.

Example with Hugo: #

1. Create a static/videos/ folder in your Hugo project and upload your videos there.
2. Create a videos/index.md file to define the gallery page:

---
title: My Video Gallery
---

3. Add a template file at layouts/videos/list.html to generate the video embeds:

<div class="video-gallery">
{{ range readDir "static/videos" }}
    {{ $fileExt := lower .Name | path.Ext | strings.TrimPrefix "." }}
    {{ if in (slice "mp4" "webm" "ogg") $fileExt }}
        {{ $videoPath := printf "/videos/%s" .Name }}
        {{ $videoTitle := .Name | path.BaseName }}
        <div class="video-card">
            <h3>{{ $videoTitle }}</h3>
            <video controls width="100%">
                <source src="{{ $videoPath }}" type="video/{{ $fileExt }}">
                Your browser doesn't support HTML5 video.
            </video>
        </div>
    {{ end }}
{{ end }}
</div>

How it works:

• Every time you add a new video to static/videos/, run hugo to rebuild your site. The gallery will automatically include the new video.
• If you host on platforms like Netlify or Vercel, you can set up auto-deploys so pushing a new video to your Git repo triggers a rebuild.

3. Frontend JavaScript + Directory Listing (Caveats Apply) #

If you don’t have backend support, you can enable directory listing on your web server and use JavaScript to scrape the directory contents and generate video embeds. Note: This is less secure, as directory listing exposes all files in the folder—use only if you’ve restricted access (e.g., password protection).

Example with JavaScript: #

1. Enable directory listing:
   • For Apache: Add Options +Indexes to your .htaccess file.
   • For Nginx: Add autoindex on; to your server block configuration.
2. Create an HTML file (e.g., video-gallery.html) with this code:

<!DOCTYPE html>
<html>
<head>
    <title>Video Gallery</title>
    <style>
        .video-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }
        .video-card {
            border: 1px solid #eee;
            padding: 1rem;
            border-radius: 8px;
        }
        video {
            width: 100%;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="video-container"></div>

    <script>
        const videoDirectory = './videos/';
        const allowedExtensions = ['mp4', 'webm', 'ogg'];

        // Fetch the directory listing page
        fetch(videoDirectory)
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const fileLinks = doc.querySelectorAll('a[href]');
                const container = document.getElementById('video-container');

                container.innerHTML = '<div class="video-gallery">';

                fileLinks.forEach(link => {
                    const fileName = link.textContent.trim();
                    const fileExt = fileName.split('.').pop().toLowerCase();

                    // Skip directories and non-video files
                    if (allowedExtensions.includes(fileExt) && !fileName.endsWith('/')) {
                        const videoUrl = videoDirectory + fileName;
                        const videoTitle = fileName.split('.')[0];

                        const videoCard = document.createElement('div');
                        videoCard.className = 'video-card';
                        videoCard.innerHTML = `
                            <h3>${videoTitle}</h3>
                            <video controls>
                                <source src="${videoUrl}" type="video/${fileExt}">
                                Your browser doesn't support HTML5 video.
                            </video>
                        `;
                        container.appendChild(videoCard);
                    }
                });

                container.innerHTML += '</div>';
            })
            .catch(error => console.error('Failed to load video directory:', error));
    </script>
</body>
</html>

Bonus: Styling Tips #

Add this CSS to any of the above solutions to make your gallery look polished:

.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.video-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.video-card h3 {
    margin-top: 0;
    color: #333;
}

video {
    width: 100%;
    border-radius: 4px;
    margin-top: 1rem;
}

Security Notes #

• Restrict access: If using directory listing, add password protection (e.g., Apache .htpasswd, Nginx auth_basic) to prevent unauthorized access to your video files.
• Validate files: Always filter by allowed extensions to avoid loading non-video content.
• Limit permissions: Ensure your web server only has read access to the video directory (no write access unless necessary).

内容的提问来源于stack exchange，提问作者SJ19