Fullscreen looping slideshow of images and video files in JavaScript

Recently I thought it would be nice to convert a bunch of GIFs I have to MP4 format to save space on memory cards. I wanted to make sure that the resulting video files could be watched in a loop. QuickLook on Mac, sadly, doesn't do this.

Slideshow



So I tackled my problem myself and quickly created a small project in pure JavaScript that gave me what I needed. Here you can experiment with it. And here is a video demonstrating it in action.

Opportunities

Among the possibilities of my JavaScript project for organizing looped slideshows, I want to note the following:

• .
• . (- «» «» , «» .)
• - X .
• - , .
• -. , .

In order to use a slideshow on an HTML page, the program must provide a container in which it will create its elements, and set its parameters by setting the values ​​of the object properties slideshow



. These properties are:

• container
  
  
  
  : a reference to the HTML element in the DOM where the slideshow should be placed.
• media
  
  
  
  : an array with the names of the video files and images to be displayed.
• folder
  
  
  
  : the folder containing the above materials, which should be a subdirectory of the folder that contains the files that implement the slideshow functionality.
• autoplay
  
  
  
  : A property that indicates whether the slideshow should be played automatically. It can contain one of two values: yes
  
  
  
  (autoplay enabled) or no
  
  
  
  (autoplay disabled).
• speed
  
  
  
  : time in milliseconds that the program will hold before moving on to showing the next material (for example, a value of 1000 means 1 second).

<div id="slideshow-container"></div>
<script>
  let slideshow = {
    container: '#slideshow-container',
    media: [
    'ball.mp4','dinowalk.mp4','dirty.mp4',
    'goldiejump.mp4','step.mp4','tippy.mp4','wag.mp4'
    ],
    folder: 'imgs/',
    autoplay: 'yes'
  }
</script>
<script src="slideshow.js"></script>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Automatically work with collections of media files

I am currently using this project on a local server using a script index.php



. For someone on a Mac, PHP is already installed. Therefore, to start the project, you just need to open the terminal, go to the folder with the project materials and run the following command:

$ php -S localhost:8000

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Then, using the browser, you can go to the address localhost:8000



, and the program will do the rest by itself.



In particular, the script index.php



will find all folders in the same directory as the script and list them. If you click on the name of one of the folders, the playback of files from it will start. You can easily look at the code of this script, but I'll say right away that there is nothing special about it.



The code index.php



can be found in the project repository . In order to start showing your own slideshows, you can clone the repository or download it as a ZIP archive.



How would you solve the problem of showing looped slideshows?