HTML5 随机播放指定文件夹中的视频（首次加载即随机，非固定首项）-html教程-PHP中文网

HTML5 随机播放指定文件夹中的视频（首次加载即随机，非固定首项）

本文详解如何在 html5 页面中实现视频首次加载即随机选取、后续播放也持续随机切换，解决传统写法中首次总固定播放第一个文件的问题。

本文详解如何在 html5 页面中实现视频首次加载即随机选取、后续播放也持续随机切换，解决传统写法中首次总固定播放第一个文件的问题。

要让 HTML5 元素在页面初次加载时就播放真正随机的视频（而非默认取 $files[0]），关键在于：首次视频源（src）也必须通过随机逻辑动态生成，而非硬编码索引。当前代码的问题在于——虽然 ended 事件触发后能随机切换，但初始却始终绑定到数组首个元素，导致“第一播必固定”。

✅ 正确实现思路

PHP 端：保持目录扫描逻辑不变，但需确保输出为合法 JSON 数组（注意 scandir() 返回含 . 和 ..，已用 array_diff 过滤）；
JavaScript 端：
- 将初始视频源也交由随机函数决定；
- 避免缓存随机索引（如原 activeVideo 变量），改用每次调用都实时计算的函数；
- 在页面加载完成时立即设置首个随机 src，再启动自动播放。

✨ 优化后的完整代码

<script>
<?php
$directory = 'videos';
$path = './' . $directory . '/';
$allFiles = scandir($path, SCANDIR_SORT_DESCENDING); // 降序更易读，非必需
$files = array_values(array_diff($allFiles, ['.', '..'])); // 重置键名，确保数字索引从0开始
?>
</script><video id="myvideo" width="1280" height="720" controls autoplay playsinline style="background:black">
  Your browser does not support the video tag.
</video><script type="text/javascript">
  const directory = '<?php echo $directory; ?>';
  const myvids = <?php echo json_encode($files); ?>;

  // ✅ 核心：每次需要索引时都实时生成
  function getRandomIndex(max) {
    return Math.floor(Math.random() * max);
  }

  function getRandomVideoSrc() {
    return directory + '/' + myvids[getRandomIndex(myvids.length)];
  }

  // ✅ 第一步：页面加载后立即设置首个随机视频
  document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('myvideo');
    video.src = getRandomVideoSrc();
    // 可选：确保自动播放（部分浏览器需用户交互后才允许 autoplay，但 playsinline + muted 可提升成功率）
    video.load(); // 显式调用 load() 确保新 src 生效
  });

  // ✅ 第二步：视频结束时再次随机切换
  document.getElementById('myvideo').addEventListener('ended', () => {
    const video = document.getElementById('myvideo');
    video.src = getRandomVideoSrc();
    video.load(); // 必须调用 load() 才能重新加载新资源
    video.play().catch(e => console.warn("Autoplay prevented:", e)); // 兼容性兜底
  });
</script>