HTML5 使用 <video> 标签从目录中插入每个 .mp4答案

【问题标题】：HTML5 using <video> tag to insert every .mp4 from a directoryHTML5 使用 <video> 标签从目录中插入每个 .mp4
【发布时间】：2017-07-26 03:00:53
【问题描述】：

我正在尝试制作一个非常基本的图像/视频共享网站。为了让我自己更轻松，我想知道是否可以从一个目录中批量包含所有 .mp4，而不是单独添加它们。这是我目前的文档：

<html>
<body>Under construction.<br>
<video autoplay>
<source src="away.mp4" type="video/mp4">
</video>
</body>
</html>

我不想为每个文件手动添加<video> 标签，有没有办法一次性添加它们？或者像 YouTube 那样，它会显示一个缩略图，但会打开另一个页面来播放它。如果有办法批量添加视频源，是否包括新添加的文件？

【问题讨论】：

这将是一个潜在的安全问题，它允许客户端应用程序抓取整个文件目录，所以我认为仅使用 HTML 是不可能的。如果您使用的是 PHP、ASP.NET、JavaScript (Node) 等服务器脚本语言，那么很容易做到这一点。您必须使用服务器端语言来查找图像，然后遍历它们以创建 HTML 节点以提供给最终用户客户端。
PHP 会是处理大量不同大小文件的方法吗？文件类型会影响这个吗？
使用 PHP，您可以相对轻松地构建视频链接列表。如果您已经在服务器上运行它，这可能是您要走的路。
通常更流行的服务器端语言将能够读取文件系统。此时语言的选择取决于您最熟悉的语言。如果你对这些语言有任何经验，我会选择那个。
^你们俩都帮了大忙！我从未真正使用过 PHP，因为与 HTML 相比，它对我来说似乎很可怕，但我找到了一个不错的教程，并找到了一种将它融入我的想法的方法。谢谢！

标签： html image video

【解决方案1】：

也许是这样的

<?php
$dir    = './videos';
$video_files = [];

foreach(glob($dir.'/*.*') as $file) {
    $file_parts = pathinfo($file);
    if ($file_parts['extension'] == "mp4"){
        $video_files[] = $file;
    }
}

foreach($video_files as $video_file) {
    echo "<video autoplay>";
    echo "<source src=". $video_file ." type='video/mp4'>";
    echo "</video><br/>";
}

?>

或在一个循环中

<?php
$dir    = './videos';
$video_files = [];

foreach(glob($dir.'/*.*') as $file) {
    $file_parts = pathinfo($file);
    if ($file_parts['extension'] == "mp4"){
        echo "<video autoplay>";
        echo "<source src=". $file ." type='video/mp4'>";
        echo "</video><br/>";
    }
}

?>

【讨论】：