如何让HTML5视频播放器首次加载即播放随机视频？

你可以通过两种方式修改脚本，实现页面加载后首次就播放随机视频：

方式一：PHP端直接生成随机初始视频 #

直接在PHP中随机选取视频文件作为video标签的初始源，页面加载时就会加载随机视频：

修改后的完整代码：

<?php
$directory = 'videos';
$path = './' . $directory . '/';
$allFiles = scandir($path, 1);
$files = array_diff($allFiles, array('.'));
// 生成随机索引获取初始视频
$randomIndex = array_rand($files);
$initialVideo = $files[$randomIndex];
?>
<video src="<?php echo './videos/' . $initialVideo; ?>" id="myvideo" width="1280" height="720" controls autoplay playsinline style="background:black"> 
</video>
<script type='text/javascript'>
  var directory = '<?php echo $directory; ?>';
  var myvids = <?php echo json_encode($files); ?>;
  document.getElementById('myvideo').addEventListener('ended', randomlyChooseVideo, false);

  function getRandomIndex(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }

  function randomlyChooseVideo() {
    var vid = document.getElementById("myvideo");
    var randomIndex = getRandomIndex(myvids.length);
    vid.src = directory + '/' + myvids[randomIndex];
  }
</script>

修改说明：

• 移除了原脚本中仅用于打印数组的无用PHP代码块
• 用array_rand()在PHP中生成随机索引，直接设置初始视频路径
• 简化JS逻辑，每次视频结束时重新生成随机索引，避免全局变量冗余

方式二：JS端初始化时替换视频源 #

如果希望保留PHP生成文件列表的逻辑，仅通过JS在页面加载时替换初始视频源：

修改后的完整代码：

<?php
$directory = 'videos';
$path = './' . $directory . '/';
$allFiles = scandir($path, 1);
$files = array_diff($allFiles, array('.'));
?>
<video src="" id="myvideo" width="1280" height="720" controls playsinline style="background:black"> 
</video>
<script type='text/javascript'>
  var directory = '<?php echo $directory; ?>';
  var myvids = <?php echo json_encode($files); ?>;
  var vid = document.getElementById('myvideo');

  function getRandomIndex(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }

  function randomlyChooseVideo() {
    var randomIndex = getRandomIndex(myvids.length);
    vid.src = directory + '/' + myvids[randomIndex];
    // 设置源后触发播放，解决自动播放限制问题
    vid.play().catch(err => {
      console.log('自动播放失败:', err);
    });
  }

  // 页面加载完成后立即设置随机视频
  window.addEventListener('load', randomlyChooseVideo);
  // 监听视频结束事件切换下一个随机视频
  vid.addEventListener('ended', randomlyChooseVideo, false);
</script>

修改说明：

• 将video标签的初始src设为空
• 添加window.load事件监听，页面加载完成后立即调用随机视频函数
• 在切换视频的函数中添加vid.play()，解决初始源为空时自动播放不生效的问题（部分浏览器会限制无交互自动播放，因此添加错误捕获）

两种方式均可实现需求，你可以根据场景选择：

• 若希望页面加载时直接渲染随机视频路径，选方式一
• 若需要更灵活的JS交互控制，选方式二

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