Presentación de diapositivas en bucle de pantalla completa de imágenes y archivos de video en JavaScript

Recientemente pensé que sería bueno convertir un montón de GIF que tengo al formato MP4 para ahorrar espacio en las tarjetas de memoria. Quería asegurarme de que los archivos de video resultantes pudieran verse en un bucle. QuickLook en Mac, lamentablemente, no hace esto.

Presentación de diapositivas



Así que abordé mi problema yo mismo y rápidamente creé un pequeño proyecto en JavaScript puro que me dio lo que necesitaba. Aquí puedes experimentar con él. Y aquí hay un video que lo demuestra en acción.

Oportunidades

Entre las posibilidades de mi proyecto de JavaScript para organizar presentaciones de diapositivas en bucle, quiero señalar lo siguiente:

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

Para utilizar una presentación de diapositivas en una página HTML, el programa debe proporcionar un contenedor en el que creará sus elementos y establecerá sus parámetros estableciendo los valores de las propiedades del objeto slideshow



. Estas propiedades son:

• container
  
  
  
  : una referencia al elemento HTML en el DOM donde se debe colocar la presentación de diapositivas.
• media
  
  
  
  : una matriz con los nombres de los archivos de vídeo y las imágenes que se mostrarán.
• folder
  
  
  
  : la carpeta que contiene los materiales anteriores, que debe ser un subdirectorio de la carpeta que contiene los archivos que implementan la función de presentación de diapositivas.
• autoplay
  
  
  
  : Una propiedad que indica si la presentación de diapositivas debe reproducirse automáticamente. Puede contener uno de dos valores: yes
  
  
  
  (reproducción automática habilitada) o no
  
  
  
  (reproducción automática deshabilitada).
• speed
  
  
  
  : tiempo en milisegundos que el programa mantendrá antes de pasar a mostrar el siguiente material (por ejemplo, un valor de 1000 significa 1 segundo).

<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>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Trabajo automático con colecciones de archivos multimedia.

Actualmente estoy usando este proyecto en un servidor local usando un script index.php



. Para alguien en una Mac, PHP ya está instalado. Por lo tanto, para iniciar el proyecto, solo necesita abrir el terminal, ir a la carpeta con los materiales del proyecto y ejecutar el siguiente comando:

$ php -S localhost:8000

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Luego, usando el navegador, puede ir a la dirección localhost:8000



y el programa hará el resto por sí mismo.



En particular, el script index.php



encontrará todas las carpetas en el mismo directorio que el script y las enumerará. Si hace clic en el nombre de una de las carpetas, comenzará la reproducción de los archivos. Puede ver fácilmente el código de este script, pero diré de inmediato que no tiene nada de especial.



El código index.php



se puede encontrar en el repositorio del proyecto. Para comenzar a mostrar sus propias presentaciones de diapositivas, puede clonar el repositorio o descargarlo como un archivo ZIP.



¿Cómo resolvería el problema de mostrar presentaciones de diapositivas en bucle?