HTML自动播放视频并从文件夹继续循环

Question

I want to run all the videos that are in the folder, autoplay them and repeat them continuously.

I have found some javascript code and it works perfectly but it has to be included in the javascript code list, is there a way to change this coding to read all the videos in a folder.

this is the javascript code :

<div class="main">  
    <video src="video\\video1.mp4" id="myvideo" width="100%" height="100%" controls autoplay poster="gambar\logo.png">
</video>

<script>
    var myvid = document.getElementById('myvideo');
var myvids = [
  "video\\video1.mp4", 
  "video\\video2.mp4",
  "video\\video3.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the new active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});
</script>
</div>  

if indeed there is another way I will also accept it, maybe using a database to read the file or other coding. Please help.

Answer 1

Assuming you are using PHP ,

<?php
$directory='videos'; // Add your Directory here
$path    = './'.$directory.'/';
$allFiles = scandir($path,1);
$files = array_diff($allFiles, array('.', '..'));
print_r($files)
?>

<div class="main">  
    <video src="<?php echo 'videos/'.$files[0];?>" id="myvideo" width="100%" height="100%" controls autoplay  poster="gambar\logo.png">
</video>
<script type='text/javascript'>
  var directory = '<?php echo $directory;?>';
    var myvids = <?php echo json_encode($files); ?>;
    index=0;
    document.getElementById('myvideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
     index++;
       // For Repeating all video files 
       if(index>=myvids.length)
        index=0;

     var vid = document.getElementById("myvideo");
       vid.src = directory+'/'+myvids[index];
    }

</script>
</div>  

Hope this will help you ! .