PHP scandir 实现可交互视频目录列表教程

以下是推荐的完整实现方案（兼容您现有结构，无需重构整个项目）：

✅ 正确使用 scandir() 生成可点击视频列表

<?php
function php_func_LatestHits() {
    $dir = 'music/Latest Hits';
    $webPath = '/music/Latest Hits'; // 对应 Web 可访问的相对路径（重要！）

    $files = scandir($dir);
    foreach ($files as $value) {
        // 过滤系统目录及隐藏文件
        if (in_array($value, ['.', '..', '.DS_Store'])) continue;

        $filePath = $dir . '/' . $value;
        $webUrl   = $webPath . '/' . urlencode($value); // 防止空格/中文导致 404

        // 仅处理视频文件（增强健壮性）
        $ext = strtolower(pathinfo($value, PATHINFO_EXTENSION));
        if (!in_array($ext, ['mp4', 'webm', 'ogg', 'mov'])) continue;

        // 输出带链接的列表项（支持点击播放）
        echo '<div class="video-item" style="margin: 8px 0;">';
        echo "<strong><a href='{$webUrl}' target='player-frame' onclick='loadVideo(\"{$webUrl}\"); return false;'>{$value}</a></strong>";
        echo '<br><small>(' . round(filesize($filePath) / 1024 / 1024, 2) . ' MB)</small>';
        echo '</div>';
    }
}
?>

? 关键点说明：

• scandir() 本身无缺陷，问题出在未构造有效 HTML 链接和未匹配 Web 可访问路径；
• $webPath 必须是相对于网站根目录的路径（如 /music/...），而非服务器绝对路径；
• 使用 urlencode() 处理文件名中的空格、中文等特殊字符，避免 URL 解析失败；
• 添加 MIME 类型过滤，防止意外显示 .txt 或 .log 文件。

✅ 前端集成：点击即播，无缝嵌入目标容器

在 index.php 中保留您的按钮结构，但优化 JS 逻辑，避免将 PHP 输出直接赋值给 JS 字符串（易引发 XSS 和编码问题）：

<!-- HTML 按钮 -->
<button class="button-left" onclick="showLatestHits()">Latest Hits</button>

<!-- 目标播放容器（推荐使用 <video> 标签，现代浏览器兼容性 & 控制力更强） -->
<div class="bottom-middle-block">
  <video id="player" controls width="100%" height="500" preload="metadata">
    Your browser does not support the video tag.
  </video>
</div>

<!-- 动态加载列表的容器 -->
<p id="song_genre"></p>

<!-- 改进的 JS：通过 AJAX 获取 HTML 列表（更安全、可维护） -->
<script>
function showLatestHits() {
  fetch('list-files.php?genre=latest-hits')
    .then(r => r.text())
    .then(html => {
      document.getElementById('song_genre').innerHTML = html;
    })
    .catch(err => console.error('Failed to load list:', err));
}

// 独立播放函数（支持直接点击触发）
function loadVideo(src) {
  const player = document.getElementById('player');
  player.src = src;
  player.load(); // 重载元数据
  player.play().catch(e => {
    console.warn("Autoplay prevented. User must interact first.", e);
  });
}
</script>

? 补充建议：

• 创建独立 list-files.php 脚本处理所有目录列表逻辑（解耦、利于缓存、便于权限控制）；
• 若需缩略图，不要用 （多数浏览器会尝试解码为 GIF 导致卡顿/无声）；应使用
• iframe 方案（target="yt"）已过时，且对 MP4 文件不友好；
• 启用 controls 属性提供原生控件；添加 preload="metadata" 加速首帧加载。

⚠️ 注意事项与安全提醒

• 路径安全：切勿将用户可控输入（如 $_GET['dir']）直接拼入 scandir()，否则导致目录遍历漏洞（如 ?dir=../../etc）；
• MIME 验证：前端链接不能替代服务端校验，务必在 PHP 中检查 mime_content_type() 或扩展名白名单；
• CORS 与跨域：若视频托管在其他域名，请确保响应头含 Access-Control-Allow-Origin: *；
• 移动端适配：iOS Safari 默认禁用自动播放，必须由用户手势（如 click）触发 play()，上述 loadVideo() 已满足该要求。

通过以上改造，您将获得一个基于 scandir()、结构清晰、安全可靠、体验流畅的交互式视频目录系统——既延续原有代码风格，又符合现代 Web 最佳实践。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《PHP scandir 实现可交互视频目录列表教程》文章吧，也可关注golang学习网公众号了解相关技术文章。